之前写过一个jquery的表单验证,用jquery做这个验证比较多余。正好项目有用,封装了个原生的js表单验证,名字很纯粹就叫Validator
Demo:http://liutian1937.github.io/Validator/v4/
功能点:
- 原生js,不依赖任何库
- 动态添加验证规则
- 设置是否实时报错
- 错误提示的样式,单条显示还是合并显示,以及函数形式
- 遇到错误是否停止接下来的验证
- 常用验证,邮箱,字符串,手机,以及两个字段进行比较的验证,支持自定义正则
- 单条验证规则失败后的提示信息,支持字符串或者函数
使用说明:
var F = Validator('form表单name值',{ together : false, //默认遇错误打断,显示单条错误信息,默认为false(只显示一条) errShow : 'alert', //错误提示,默认为alert,支持字符串(alert,single,multiple),自定义function(string || array()) errBox : 'error_strings', //错误消息class,默认为form表单中的 .error_strings errPar : 'li', //单个表单元素的父级元素,用于定位错误的位置 li > (span > input ) ~ span.error_strings timely : false //实时判断,是否失去焦点以及change判断 }); //添加验证规则,传参为二位数组 F.addRule([ ["username","required",'姓名不能为空'], ["username","regex=/^[A-Za-z]+$/",'只能是a-z'], ["username","minlength=3",'姓名必须大于3个字符'], ["username","maxlength=10",'姓名必须小于10个字符'], ["email","required",'邮箱必填'], ["email","email",'邮箱格式'] ]); 其中第三个参数可以是function,比如 F.addRule([ ["username","required",function(){ alert('姓名不能为空') }], ..... ]); 全局的报错也支持function(接收参数为错误的数组), errShow : function(data){ var wrongList = document.getElementById('wrongList'), html = []; wrongList.innerHTML = ''; for(var i =0; i '+data[i].msg+''); } wrongList.innerHTML = html.join(''); }
API
regex : 正则, (regex=/^[A-Za-z]+$/ ) required : 必填内容,针对input,textarea minlength : 最小字符长度 (minlength=3) maxlength : 最大字符长度 (maxlength=10) number : 数字 alpha : 字母(大小写都可) string : 字母,数字,下划线 email : 邮件格式 telphone : 电话 mobile : 手机 greaterthan : 大于某个值,或者某个input中的值 (greaterthan=5 或者 greaterthan=字段名 ) lessthan : 小于某个值,用法同上 equal : 等于某个值,或者数组(数组以|分隔)中的某个值,或者字段 (equal=66 或者 equal=字段名 或者 equal='aa|bb|cc' ) unequal : 不等于某个值,用法同上 notselect :不能选择的值,指的是select中option的value,或者 radio/checkbox数组中某一个的value (notselect=字符串或者数字或者数组) shouldselect : 必须选中,用法同上 minselect : 最少选中几项 maxselect : 最多选择几项
Github:https://github.com/liutian1937/Validator
Demo:http://liutian1937.github.io/Validator/v3/
网友评论已有0条评论, 我也要评论