本文主要是介绍文盲的 JavaScript 实战篇之一：表单验证，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
在我们的日常工作中，经常为各种页面撰写不同的表单，并且，需要对表单提交时，表单所输入的内容进行验证，比如，登录时，用户名不能为空、注册时，密码长度和复杂程度要符合安全标准等。- <form name="theForm" method="post" action="actionUrl">
- <li>用 户 名：<input type="text" name="uid" /></li>
- <li>登录密码：<input type="password" name="pwd" /></li>
- <li>确认密码：<input type="password" name="cpwd" /></li>
- <li>注册信箱：<input type="text" name="mail" /></li>
- <li><input type="submit" value="立刻注册" /></li>
- </form>
第一个选择就是，在什么时候验证，我们有以下几种选择
1、在输入数据时进行验证
2、在点击提交按钮时进行验证
3、在表单提交时进行验证
这里猛一看，第二项与第三项没有区别，其实是完全不同的，点击 submit 按钮是可以与第三项看做同一个动作，但如果表单中有这样一个按钮呢？
- <input type="button" value="submit" onclick="theForm.submit()" />
而第一个选择，就需要对每一个输入控件进行 onchange 或者 onblur 的监控，并且需要在页面内出现校验结果，操作比较麻烦，这里就不再进行讨论。
这里我们先进行第三项的讨论
那么，如何实现第三项方法呢，我们把 form 标签进行一下修饰
- <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this);">
- function checkForm(){
- // 首先校验传递进来的参数数量
- if (!arguments.length){
- alert('异常的参数数量！');
- return false;
- }
- var frm = arguments[0];
- // 其次校验传递进来的参数是否符合标准
- if (!frm.elements){
- alert('第一个参数必须是表单！');
- return false;
- }
- return false;
- }
JavaScript：
- function checkForm(){
- // 首先校验传递进来的参数数量
- if (!arguments.length){
- alert('异常的参数数量！');
- return false;
- }
- var frm = arguments[0];
- // 其次校验传递进来的参数是否符合标准
- if (!frm.elements){
- alert('第一个参数必须是表单！');
- return false;
- }
- if (((arguments.length - 1) % 3)||(arguments.length / 3 < 1)){
- alert('异常的参数数量！/n/n参数格式如下：/n/ncheckForm(this/n ,"elementName","ExpStr","alertWords"/n [,"elementName","ExpStr","alertWords"/n [,....]])');
- return false;
- }
- for (var i = 0 ; i < arguments.length /3 ; i ++ ){
- var el = frm.elements[arguments[i * 3 + 1]];
- if (!el){ // 校验传递进来的控件是否存在
- alert('表单中不存在 name 为 "' + arguments[i * 3 + 1] + '" 的控件！');
- return false;
- }
- var cf = frm.elements[arguments[i * 3 + 2]];
- if (cf){ // 判断传递进来的参数是否为控件
- if (cf.value!=el.value){
- alert(arguments[i * 3 + 3]);
- el.focus();
- return false;
- }
- }else{
- var re = RegExp(arguments[i * 3 + 2],'gi');
- if (!re.test(el.value)){ // 对控件值进行正则匹配
- alert(arguments[i * 3 + 3]);
- el.focus();
- return false;
- }
- }
- }
- return true;
- }
HTML：
- <form name="theForm" method="post" action="actionUrl" onsubmit="return checkForm(this,'uid','^[a-zA-Z0-9]{3,8}$','用户名只能有字母、数字组成，长度必须在 3 到 8 位。','pwd','^[//s//S]{6,16}$','密码可以由任意字符组成，长度为 6 到 16 位。','cpwd','pwd','确认密码与登录密码不一致。','mail','^[//w.-]+@([0-9a-z][//w-]+//.)+[a-z]{2,3}$','请输入合法的Email地址。');">
- <li>用 户 名：<input type="text" name="uid" /></li>
- <li>登录密码：<input type="password" name="pwd" /></li>
- <li>确认密码：<input type="password" name="cpwd" /></li>
- <li>注册信箱：<input type="text" name="mail" /></li>
- <li><input type="submit" value="立刻注册" /></li>
- </form>
这里是使用正则进行判断，checkForm 的第一个参数是表单本身，然后按照三个一组的规律，分别传递控件名、校验正则、校验失败提示语，或者是控件名、控件名、校验失败提示语。
如此一来，我们的表单校验就基本上完成了。
这篇关于文盲的 JavaScript 实战篇之一：表单验证的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
