01
第1节：概述
对于用户信息的维护，在任何的Web应用程序当中，都是必不可少的功能模块，对于添加用户，都需要对用户的信息进行验证，只有符合要求的用户信息可以允许添加。
对于用户信息的验证，在客户端进行验证，则要使用JavaScript进行各种验证。验证通过之后，还可以继续在服务器端进行验证，以防止各种攻击。
02
第2节：用户信息维护页面设计
这里使用Visual Studio 开发工具，创建一个Html页面，然后进行如下表单样式的设计：
图1
上图表单实现了在每个字段的相关验证，说明如下：
姓名：最大字符数为5，将<转换为<将>>存储。使用input元素的maxlength属性指定：
<input id="txtName" maxlength="5" type="text" />
昵称：最大20个字符。性别：要么选男，要么选女。邮箱：符合所有邮箱格式的验证。正则：^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$
手机号：允许所有符合手机号要求。正则：^1\d{10}$
网址：符合所有的Web网址要求。正则：^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+
座机：符合所有座机的输入。正则：^0\d{2,3}-\d{7,8}(-\d{1,6})?$
身份证号：符合所有中国身份证号码的要求。正则：(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)
03
第3节：JS验证表单代码
对于保存按钮，挂接执行验证JS的事件代码，代码如下：
function saveData() {//姓名var name = document.getElementById("txtName").value;var saveName = name.replace("<", "<").replace(">", ">");//邮箱var emailPatt = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/i;var email = document.getElementById("txtEmail").value;if (emailPatt.test(email)) {} else {alert("邮箱格式不正确！");//使用return返回，后面的代码不再运行。return;}//手机号var phonePatt = /^1\d{10}$/i;var phone = document.getElementById("txtPhone").value;if (phonePatt.test(phone)) {}else {alert("手机号格式不正确！");return;}//网址var webUrlPatt = /^((https|http|ftp|rtsp|mms)?:\/\/)[^\s]+/i;var webUrl = document.getElementById("txtWebUrl").value;if (webUrlPatt.test(webUrl)) {} else {alert("网址不正确！");return;}//座机国内010-67389669var telPatt = /^0\d{2,3}-\d{7,8}(-\d{1,6})?$/i;var tel = document.getElementById("txtTel").value;if (telPatt.test(tel)) {} else {alert("座机不正确！");return;}//身份证号码var cardIDPatt = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/i;var cardID = document.getElementById("txtCardID").value;if (cardIDPatt.test(cardID)) {} else {alert("身份证号码不正确！");return;}}
对于非空验证，大家可以自行验证一下，这里主要是针对每个输入文本框的相关信息的验证。
04
第4节：表单验证效果
当单击“保存”按钮后，如果表单页面上存在没有验证通过的文本框，则会给出提示信息：
图2
图2提示邮箱格式不正确，需要输入正确的Email格式之后，才能进行下一步的操作。
图3
图3提示手机号码不正确，需要提供正确的手机号。
对于表单上的这些输入标记的验证，需要使用正则表达式根据业务需求编写验证代码，最终完成表单的验证。
