js 表单验证
使用文档：
请仔细阅读后使用
首先要在页面的头部引入三个js 文件：
<script src="js/jquery-1.12.2.min.js"></script> <script src="js/jquery.form.js"></script> <script src="js/RExp.js"></script>
jquery-1.12.2.min.js（这个不用说了）
jquery.form.js（这个js文件在百度可以下载到）
RExp.js（这个 js 文件下面会贴出来，有不懂的可以留言咨询，或者加本人QQ172360937讨论）
页面布局应该这样布：
<div id='div'> <form action="#" id="myform2"> <ul> <li> <input type="text" value=''onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)> <span></span> </li> <li> <input type="text" value=''onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)> <span></span> </li> <li> <input type="text" value=''onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)> <span></span> </li> <li> <input type="text" value=''onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)> <span></span> </li> <li> <input type="text" value=''onkeyup= Pattern(this,/[\u4E00-\u9FA5]{2,4}/i)> <span></span> </li> <li> <select name="" id=""> <option value="">11111</option> <option value="">22222</option> </select> <span></span> </li> <li> <input type="button" value='提交' onclick = 'RExp.Rsubmit(this);BtnSa()'> </li> </ul> </form>
1*,页面布局：(重要)
每个表单要单独放到一个 li 里，每个 li 里只允许有一个 span 标签
2*,事件添加：
在要验证的表单里写行内 onkeyup 事件传入两个参数 第一个参数是 this【必填】
第二个参数是此表单的正则表单式【选填】。非空可以不传第二个参数，相对的函数也不用接收参数
3*,button事件：
form 表单里的button按钮应该这样写 ：
<input type="button" value='提交' onclick = 'RExp.Rsubmit(this);BtnSa()'>
不然会直接提交, 事件的写法是固定的，函数的前后顺序不要变，中间不要有空格，先执行第一个再执行第二个，或者可以获取按钮的 id 在页面上添加点击事件但是要保证先执行 RExp.Rsubmit(this) 方法
4*,提示信息：
如果提示信息不一样，可以复制一份 Pattern()函数，修改函数名字，修改提示信息即可.
5*,RExp.Rstyle 函数 ：
就像ajax一样用哪个参数传哪个参数。
6*,Pattern 函数书写格式：
1-1：接收两个参数，第一个参数必须写，第二个参数不用就可以不写
function Pattern(_this,exp){ RExp.Rstyle({ 'regular':exp,// -- 当前要验证的 input 框的正则表达式 'trueText':'* 正确', // -- 通过的提示文字 'falseText':'* 姓名格式不正确', // -- 没有通过的提示文字 'nullText':'* 姓名不能为空', // -- 为空的提示文字 'trueColor':'green', // -- 验证通过的提示文字颜色 'falseColor':'orange', // -- 验证没有通过的提示文字颜色 'nullColor':'red', // -- 为空时的提示文字颜色 'This':_this }); }
7*,提交表单的 ajax 写法：
BtnSa()函数是提交按钮点击时触发的函数只有表单里的所有验证都通过后RExp.Rtype 才会变为 true,其他情况 RExp.Rtype 都为false
function BtnSa(){
if(RExp.Rtype){ // - 验证通过后进来
$('#myform2').ajaxSubmit({ // - button 按钮对应的form 表单
url: 'package.json', // - 提交表单的地址
type: 'get', // - 提交方式
dataType: 'json', // - 数据格式
success: function (data) { // - 成功函数
alert('成功');
},
error:function(){ // - 失败函数
alert('失败');
}
});
}
}
8*,不过这一切都是基于 jquery-1.12.2.min.js 和 jquery.form.js
以下是 RExp.js 代码，（复制到你的 js 文件里，或者单独引入都可以）
var RExp = { // -- 此处动态改为 true 可以进入 ajax 提交form Rtype:false, // -- 全局 觉定是否提交表单 Roverall:0, // == 提交按钮的事件 Rsubmit:function(_this){ this.Roverall = 0; var inputSubmit = _this.form.getElementsByTagName("*"); for(var i = 0;i<inputSubmit.length-1;i++){ if(inputSubmit[i].onkeyup == undefined){ this.Roverall ++; }else{ inputSubmit[i].onkeyup(); } } if(this.Roverall != inputSubmit.length-1){ this.Roverall = 0; this.Rtype = false; }else{ this.Rtype = true; } }, // == 提示信息样式函数 Rstyle:function(){ var Span = arguments[0].This.parentNode.getElementsByTagName('span')[0]; if(arguments[0].This.value == ''){ if(arguments[0].nullText != undefined){ this.Rcomm({ 'span':Span, 'Text':arguments[0].nullText, 'Color':arguments[0].nullColor }); } return; }else if(arguments[0].regular == undefined){ this.Rcomm({ 'span':Span, 'Text':arguments[0].trueText, 'Color':arguments[0].trueColor }); this.Roverall ++; } if(arguments[0].regular != undefined){ var type = arguments[0].regular.test(arguments[0].This.value); if(type){ if(arguments[0].trueText != undefined){ this.Rcomm({ 'span':Span, 'Text':arguments[0].trueText, 'Color':arguments[0].trueColor }); } this.Roverall ++; }else{ if(arguments[0].falseText != undefined){ this.Rcomm({ 'span':Span, 'Text':arguments[0].falseText, 'Color':arguments[0].falseColor }); } } } }, // -- 公共方法 Rcomm:function(){ arguments[0].span.innerHTML = arguments[0].Text; arguments[0].span.style.color = arguments[0].Color; } }
