聚合国内IT技术精华文章,分享IT技术精华,帮助IT从业人士成长

Validator又一个表单验证,原生JS

2014-02-22 02:20 浏览: 1663909 次 我要评论(0 条) 字号:

之前写过一个jquery的表单验证,用jquery做这个验证比较多余。正好项目有用,封装了个原生的js表单验证,名字很纯粹就叫Validator

Demo:http://liutian1937.github.io/Validator/v4/

功能点:

  1. 原生js,不依赖任何库
  2. 动态添加验证规则
  3. 设置是否实时报错
  4. 错误提示的样式,单条显示还是合并显示,以及函数形式
  5. 遇到错误是否停止接下来的验证
  6. 常用验证,邮箱,字符串,手机,以及两个字段进行比较的验证,支持自定义正则
  7. 单条验证规则失败后的提示信息,支持字符串或者函数

使用说明:

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条评论, 我也要评论

发表评论

*

* (保密)

Ctrl+Enter 快捷回复