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提示手机号码不正确,需要提供正确的手机号。
对于表单上的这些输入标记的验证,需要使用正则表达式根据业务需求编写验证代码,最终完成表单的验证。
如果觉得《JavaScript正则表达式的表单设计 JS验证代码和表单验证效果》对你有帮助,请点赞、收藏,并留下你的观点哦!