js原生态表单验证Validator类-自学php网

js原生态表单验证Validator类

来源：自学PHP网时间：2023-07-07 09:28 作者：阅读:次

[导读] Validator是jquery一个名字表单验证类，但发现jquery的代码比较多自己觉得不好用，于是找到一个封装了个原生的js表单验证，下面我来给各位介绍介绍。...

功能点：

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 : 最多选择几项

例

代码如下复制代码

<!DOCTYPE html>

<head>

<title>

JavaScript form validator Example

</title>

html,body,div,form,ul,li,h1{margin:0;padding:0;font-size: 12px;}

ul{list-style: none;}

.inlineWrap{letter-spacing: -0.31em;*letter-spacing: normal;*word-spacing: -0.43em;}

.inlineBlock{display: inline-block;zoom: 1;*display: inline;letter-spacing: normal;word-spacing: normal;vertical-align: top;}

#wrap{padding:30px;}

#wrap h1{background: #0866c6;font-family: 'Microsoft YaHei';font-size: 24px;line-height: 40px;color: #fff;padding-left: 20px;}

/*form list start*/

.formList{padding:20px;}

.formList li{position:relative;display: block;margin-top: 10px;overflow: hidden;}

.formList li label{width:170px;text-align:right;color:#0866c6;display: inline-block;line-height: 30px;float:left;}

.formList li span{display:block;margin-left: 190px;line-height: 30px;}

textare, input{display:inline-block;height:20px;padding:4px 6px;line-height:20px;color:#555555;vertical-align:middle;-webkit-border-radius: 0;-moz-border-radius: 0;border-radius: 0;outline:none;max-width:90%;width:200px;}

textarea, input, select{background-color:#ffffff;border:1px solid #cccccc;box-shadow:inset 0 1px 1px rgba(0,0,0,0.075);-webkit-transition:border linear .2s, box-shadow linear .2s;transition:border linear .2s, box-shadow linear .2s;}

select{padding:5px;font-size:12px;color:#555;border:1px solid #ccc;}

textarea:focus,input:focus,select:focus{border-color:rgba(82,168,236,0.8);border-color:#0866c69;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,168,236,.6);}

input[type=radio]:focus{box-shadow: none;}

.btn{font-size:12px;border:1px solid #bbb;background: #0866c6;color: #fff;text-decoration:none;height:30px;vertical-align: baseline;width:100px;cursor: pointer;}

.btn:hover{background: #1b58b8;color: #fff;}

.error_strings{padding:10px;color: #db4f33;line-height: 20px;font-size: 12px;border: 10px solid #0866c6;display: none;position: fixed;top:90px;left:600px;}

.formList li span label{display: inline-block;color: #000;font-weight: normal;width:auto;margin-right: 10px;}

.formList li span label input{width: auto;}

.formList li .error_strings{display: inline-block;margin:0;padding:0;background: none;border:none;border-left:5px solid #db4f33;line-height: 14px;padding-left: 5px;margin-left: 10px;position: relative;top:0px;left:0px;}

#wrongList{width:200px;display: inline-block;margin: 50px;}

#wrongList li{width:100%;background:#3B70E1;color: #fff;padding:5px 10px;line-height: 18px;margin: 5px 0px;}

.setting {padding-top:30px;}

.setting label{width:auto;}

.setting label input{width:auto;}

</style>

</head>

<body>

<h1>Form Validator</h1>

<div>

<label><input type="radio" value="0" name="shownum" checked>只显示一条错误</label>

</div>

<div>

<label><input type="radio" value="alert" name="wrongtype" checked>alert</label>

</div>

</div>

默认设置：<br/>

只显示一条错误信息<br/>

实时显示关闭<br/>

报错样式为alert

</div>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<label>不能等于上面</label>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<label>不能等于aa,bb,cc</label>

<span>

</span>

</li>

<li>

<label>只能从ab,ac,ad中取</label>

<span>

</span>

</li>

<li>

<label>不能选择第一项0</label>

<span>

</select>

</span>

</li>

<li>

<label>必须选中第一个，不能选第三个</label>

<span>

</span>

</li>

<li>

<label>必须选中第1,3个</label>

<span>

</span>

</li>

<li>

<label>选中数大于2，小于4（不能选择1,2）</label>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

<li>

<span>

</span>

</li>

</ul>

</form>

</div>

</ul>

</div>

document.forms['myform'].onsubmit = function(){

alert ('已经通过验证，要进行提交操作');

return false;

}

//errShow : function(data){

// var wrongList = document.getElementById('wrongList'), html = [];

// wrongList.innerHTML = '';

// for(var i =0; i < data.length ; i += 1){

// html.push('<li>'+data[i].msg+'</li>');

// }

// wrongList.innerHTML = html.join('');

使用Simple Inheritance来创建自己的类

javascript支持匿名函数的事件监听封装

子栏目

js原生态表单验证Validator类

最新评论

添加评论

更多文章推荐

添加评论