JS实现的通用表单验证插件完整实例
本文实例讲述了JS实现的通用表单验证插件。分享给大家供大家参考。具体如下：
这里演示一个通用的JS表单验证插件代码。使用方法：第一步：需设定表单项数据类型，第二步：实例表单验证，验证错误提示说明（程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg）。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
body,td{font:12px Verdana;color:#333}
input,textarea,select,td,th{font:12px Verdana;color:#333;border:1px solid #999;background:#fff}
table{border-collapse:collapse;}
th{font:bold 12px Verdana; text-align:right;padding:5px;}
td{padding:3px;line-height:1.8;}
input{height:20;}
textarea{width:80%;height:50px;overfmin:auto;}
form{display:inline}
/*输入框样式*/
input[type=text],input[type=password],textarea{border:1px solid #ccc;padding:2px;border-radius:1px;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset;outline:medium none;line-height:25px;
-webkit-transition:all 0.15s ease-in 0s;
-moz-transition:all 0.15s ease-in 0s;
-o-transition:all 0.15s ease-in 0s;
font-family:"Microsoft YaHei",Verdana,Arial;
font-size:14px;
vertical-align:top;
}
input[type=text],input[type=password]{height:25px;}
input[type=text]:focus,input[type=password]:focus,textarea:focus{/*border-color:rgba(82,168,236,0.8);*/border-color:#52a8ec;box-shadow:0 1px 2px rgba(0,0,0,0.1) inset,0 0 5px rgba(82,168,236,0.6);outline:0 none;}
</style>
</head>
<body>
<h2>使用方法</h2>
<p>第一步：需设定表单项数据类型</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" <strong style="color:#f00;">dataType="chinese[2,8]"</strong> /></p>
<p>第二步：实例表单验证</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><script type="text/javascript"><strong style="color:#f00;">new ValidatorForm(表单对象);</strong> </script></p>
<h3>dataType可选参数</h3>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<th colspan="3" style="text-align:left; background-color:#eee;">基础验证</th>
</tr>
<tr>
<th>email</th>
<td>Email地址</td>
<td rowspan="11"><strong>均可配合中括号使用</strong>，例如<br />
长度验证：chinese[1,10] 为限制只能输入1-10个全角字符，<strong>注：一个全角字符长度为2</strong><br />
数字大小验证：number[18,26] 为限制只能输入18-26的数字<br />
日期范围验证：date[1970-1-1,2012-12-12] 为限制1970-1-1至2012-12-12日期<br />
<strong>上限及下限设定</strong><br />
下限设定：chinese[1,] 至少输入1个或以上有效字符<br />上限设定：chinese[,6] 最多输入6个有效字符<br />number和date格式也类式</td>
</tr>
<tr>
<th>tel</th>
<td>电话：支持手机/固话，识别区号及全半角逗号分隔多项</td>
</tr>
<tr>
<th>mobile</th>
<td>手机号码</td>
</tr>
<tr>
<th>url</th>
<td>网址</td>
</tr>
<tr>
<th>number</th>
<td>数字</td>
</tr>
<tr>
<th>english</th>
<td>英文字母</td>
</tr>
<tr>
<th>chinese</th>
<td>全角字符</td>
</tr>
<tr>
<th>username</th>
<td>帐号：字母开头4-20位的字母数字加下划线组合</td>
</tr>
<tr>
<th>password</th>
<td>密码：4-20位字母数字或@!#$%^&*.~组合</td>
</tr>
<tr>
<th>date</th>
<td>日期</td>
</tr>
<tr>
<th>length</th>
<td>长度：格式“length[最小长度,最大长度]”</td>
</tr>
<tr>
<th colspan="3" style="text-align:left; background-color:#eee;">其它验证</th>
</tr>
<tr>
<th>Compare</th>
<td colspan="2">值对比：格式“Compare[比较符比较对象,比较类型]”<br />
比较符包括[>,>=,<,<=,!=,=]<br />
比较对象为表单项name,当表单有同名name值多项时取第一项<br />
比较类型可选值[text,number,date]分别为[字符比较,数字比较,日期比较]，留空时对当前项值自动识别后对比<br />
例如Compare[=password]</td>
</tr>
<tr>
<th>exec</th>
<td colspan="2">自定义函数：格式“exec[函数名]” <br />
传入当前输入框对象，返回json格式“{stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]}”，stat为验证结果是否正确为必须返回项，其它项留空使用默认设置[inCss暂时未使用]
<br /></td>
</tr>
</table>
<h3>验证错误提示说明</h3>
<p>程序有自带相关错误提示，可自定义每项验证错误提示时文本，只需添加msg</p>
<p style="padding:10px;border:2px dashed #ea0; background-color:#ffe;"><input type="text" name="name" dataType="chinese[2,8]" <strong style="color:#f00;">msg="姓名必需填写1-4个汉字"</strong> /></p>
<form name="theForm" id="theForm" action="" method="get">
<h2>表单验证示例</h2>
<table align="center" width="100%">
<tr>
<td>真实姓名：</td><td><input type="text" name="Name" dataType="chinese[1,]" /><span msgbox="1">请输入真实姓名</span>
<span id="vfMsgBox_Name"></span>
</td>
</tr>
<tr>
<td>英文名：</td><td><input type="text" name="Nick" dataType="english[1,10]" /></td>
</tr>
<tr>
<td>主页：</td><td><input type="text" name="Homepage" dataType="url" /></td>
</tr>
<tr>
<td>密码：</td><td><input name="password" type="text" dataType="password" /></td>
</tr>
<tr>
<td>重复：</td><td><input name="password2" type="text" dataType="Compare[=password'密码]" /></td>
</tr>
<tr>
<td>信箱：</td><td><input type="text" name="email" dataType="email[1,]" /></td>
</tr>
<tr>
<td>信箱：</td><td><input type="text" name="email2" dataType="email Compare[=email'信箱]" /></td>
</tr>
<tr>
<td>邮编：</td><td><input type="text" name="QQ" dataType="number[100000,999999]" /></td>
</tr>
<tr>
<td>日期：</td><td><input type="text" name="date" dataType="date" />
<input type="text" name="date2" dataType="Compare[>date'起始日期,date]" />
</td>
</tr>
<tr>
<td>年龄：</td><td><input type="text" name="Year" dataType="number[18,28]" /></td>
</tr>
<tr>
<td>年龄1：</td><td><input type="text" name="Year1" dataType="number[,18]" /></td>
</tr>
<tr>
<td>电话：</td><td><input type="text" name="Phone" dataType="tel" /></td>
</tr>
<tr>
<td>手机：</td><td><input type="text" name="mobile" dataType="mobile" /></td>
</tr>
<tr>
<td>生日：</td><td><input type="text" name="Birthday" dataType="date[1980-1-1,2012-5-20]" /></td>
</tr>
<tr>
<td>自我介绍：</td><td><textarea name="Description" style="width:99%;" dataType="length[0,150] exec[testFunction]">中文是一个字</textarea>
<span>自定义验证程序,长度大于50触发自定义错误及样式，长度大于150系统自带错误</span>
</td>
</tr>
<tr>
<td colspan="2"><input name="Submit" type="submit" value="确定提交"></td>
</tr>
</table>
</form>
<style type="text/css">
/*输入项样式*/
input.vf_inCorrect,textarea.vf_inCorrect{box-shadow:0 1px 2px rgba(3,139,0,0.2) inset;border-color:#90b983;color:#2d7c14;}
input.vf_inError,textarea.vf_inError{box-shadow:0 1px 2px rgba(139,23,0,0.2) inset,0 0 5px rgba(139,23,0,0.6);border-color:#d46060;color:#b40000;}
.vf_Normal,.vf_Correct,.vf_Error,.vf_Focus{vertical-align:middle;display:inline-block;padding:3px;font-size:12px;margin-left:5px; background:#eee;}
.vf_Normal{color:#777;}
.vf_Focus{color:#000;}/*提示*/
.vf_Correct{color:#20800d;display:none;}/*验证通过*/
.vf_Error{color:#f00;}/*错误*/
/*自定义样式*/
input.inTestClass,textarea.inTestClass{box-shadow:0 0 2px rgba(0,0,0,0.3) inset,0 0 5px rgba(139,23,0,0.6);border-color:#00f;color:#eee;background-color:#333;}
.TestClass_OK{color:#fff;background-color:#080;}
.TestClass_Err{color:#fff;background-color:#c00;}
</style>
<script type="text/javascript">
//添加事件
function addEvent(o,e,f){
if(window.attachEvent){o.attachEvent("on"+e,f)}else if(window.addEventListener){o.addEventListener(e,f,false);}else{o["on"+e]=f;}
}
//取消事件
function removeEvent(o,e,f){
if(window.detachEvent){o.detachEvent("on"+e,f);}else if(window.removeEventListener){o.removeEventListener(e,f,false);}else{o["on"+e]=null;}
}
// class是否存在
function hasClass(obj,sClass){var reg = new RegExp("(^|\\s)" + sClass + "(\\s|$)");return reg.test(obj.className)}
//阻止浏览器的默认行为
function stopDefault(e){if(e&&e.preventDefault){e.preventDefault();}else{window.event.returnValue=false;}return false;}
//阻断事件冒泡
function stopBubble(e){if(e&&e.stopPropagation){e.stopPropagation();}else{window.event.cancelBubble=true;}}
function GetID(s){return document.getElementById(s);}
//创建元素
function creElm(o,pN,t){
var tmp=document.createElement(t||'div'),p;
for(p in o){tmp[p]=o[p];}
return pN?pN.appendChild(tmp):document.body.appendChild(tmp);
}
//计算字符串长度[全角算2长度]
function strLength(str){return str.replace(/[^\x00-\xff]/g,"**").length;}
function SetCss(o,k,s){
var c=o.className.split(' '),n=0,nCSS='';
for(var i=0;i<c.length;i++)
{
if(c[i]!=k){nCSS+=(nCSS=='')?c[i]:' '+c[i];}
else{n=1;}
}
if(s=='add'){nCSS+=(nCSS=='')?k:' '+k;}
o.className=nCSS;
}
//自定义验证函数
function testFunction(o){
var val=o.value,len=Math.floor(strLength(val));
return {stat:len<50,msg:'已输入<strong>'+len+'</strong>个字符；',msgCss:(len<50?'TestClass_OK':'TestClass_Err'),inCss:null};
}
function ValidatorForm(f,Stat,Validator){
var vf=this;
//正则,最小值,最大值,提示消息
this.Validator={
email:[/^(\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*)?$/,0,0,'Email地址填写错误'],
tel:[/^((0?1[358]\d{9})[,，]?|((0(10|2[0-9]{1}|[3-9]{1}\d{2})[-_－—]?)?\d{7,8})[,，]?)*$/,0,0,'电话号码填写错误'],
mobile:[/^(0?1[358]\d{9})*$/,0,12,'手机号码填写错误'],
url:[/^(http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*)?$/,0,0,'网址填写错误'],
number:[/^\d*$/,0,0,'只能填写数字格式'],
english:[/^[A-Za-z]*$/,0,0,'只能输入半角英文字母'],
chinese:[/^[\u0391-\uFFE5]*$/,0,0,'只能输入全角中文'],
username:[/^[a-zA-Z]{1}\w*$/,4,20,'帐号需由字母开头的4-20位字母、数字或下划线组成'],
password:[/^[\@A-Za-z0-9\!\#\$\%\^\&\*\.\~]*$/,4,20,'密码长度4-20,请勿输入特殊字符'],
date:[/^((\d{4})[\-|\.|\/](\d{1,2})[\-|\.|\/](\d{1,2}))?$/,'','','请填写如2012-1-1格式日期！'],
Compare:[/^[\s\S]*$/,0,0,''],
length:[/^[\s\S]*$/,0,0,''],
exec:[/^[a-zA-Z]{1}\w*$/,0,0,'']
}
//消息Box样式及框入框样式
this.Stat={
tag:'span', //提示文本标签
msgNormal:'vf_Normal', //正常样式
msgCorrect:'vf_Correct', //正确
msgError:'vf_Error', //错误
msgFocus:'vf_Focus', //焦点
inCorrect:'vf_inCorrect', //文本框正确
inError:'vf_inError', //错误
inFocus:'vf_inFocus' //焦点
}
if(Validator){for(var i in this.Validator){this.Validator[i]=Validator[i]!==undefined?Validator[i]:this.Validator[i];}}
if(Stat){for(var i in this.Stat){this.Stat[i]=Stat[i]!==undefined?Stat[i]:this.Stat[i];}}
this.Form=f;
var fn=f.elements.length,i,j,_dataType;
for(i=0;i<fn;i++){
_dataType=f.elements[i].getAttribute('dataType');
_dataType=_dataType?_dataType.split(' '):[];
for(j=0;j<_dataType.length;j++)
{
if(this.Validator[_dataType[j].split('[')[0]]){
f.elements[i].onblur=(function(o){return function(){vf.CheckData(o);}})(f.elements[i]);
if(f.elements[i].tagName.toUpperCase()=='TEXTAREA'){
f.elements[i].onkeyup=(function(o){
return function(){
var MsgTag=vf.GetMsgBox(o);
MsgTag.innerHTML='已输入<strong>'+Math.floor(strLength(o.value))+'</strong>个字符；';
}
})(f.elements[i]);
}
}
}
}
//提交表单
this.submit=function(e){
var fn=vf.Form.elements.length,i,j,_Err=0,_Focus,_Msg='',t,_dataType;
for(i=0;i<fn;i++){
_dataType=f.elements[i].getAttribute('dataType');
_dataType=_dataType?_dataType.split(' '):[];
for(j=0;j<_dataType.length;j++)
{
if(vf.Validator[_dataType[j].split('[')[0]]){
t=vf.CheckData(f.elements[i]);
if(t&&t[0]==false){
_Err++;
if(!_Focus){_Focus=f.elements[i];}
_Msg+='\n'+f.elements[i].name+' '+t[1];
break;
}
}
}
}
if(_Err>0){
e&&stopDefault(e);
//_Msg //提示文本不完善，未使用，直接提示错误数量
alert('共有'+_Err+'项填写错误！');
_Focus.focus();
}
}
addEvent(f,'submit',vf.submit);
}
ValidatorForm.prototype={
//验证内容是否正确
CheckData:function(o){
var _dataType=o.getAttribute('dataType'),i,s=true,_Msg='',_msgCss,_inCss,_mdt,min,max,_dt;
_dataType=_dataType?_dataType.split(' '):[];
for(i=0;s&&i<_dataType.length;i++){
if(this.Validator[_dataType[i].split('[')[0]]){
_dt=_dataType[i].split('[')[0];
//自定义验证函数
if(_dt=='exec'){
_mdt=_dataType[i].match(/^exec\[([a-zA-Z]{1}\w*)\]$/);
// alert(typeof(eval(_mdt[1])))
if(_mdt==null){return false;}
try
{
if(typeof(eval(_mdt[1]))=="function")
{
/*
自定义函数返回json
stat:结果[true/false],msg:提示文本,msgCss:样式[className],inCss:输入框样式[className]
*/
var _exec=eval(_mdt[1])(o);
s=s&&_exec.stat;
var MsgTag=this.GetMsgBox(o);
_Msg=_exec.msg||'';
if(_exec.msgCss){_msgCss=_exec.msgCss;}
// if(_mdt.inCss){_inCss=_mdt.inCss;}
}
}
catch(e)
{
alert('not function');
return false;
}
}
//值对比
else if(_dt=='Compare'){
_mdt=_dataType[i].match(/^Compare\[(=|!=|>|>=|<|<=)([^,]+),?(number|text|date)?\]$/);
if(_mdt==null){return false;}
// alert(_mdt);
_mdt[2]=(_mdt[2]+'\'').split('\'');
if(_mdt[2][1]==''){_mdt[2][1]=_mdt[2][0];}
if(!this.Form[_mdt[2][0]]||this.Form[_mdt[2][0]].value==''){return false;}
var v2=this.Form[_mdt[2][0]].length>1?this.Form[_mdt[2][0]][0].value:this.Form[_mdt[2][0]].value;
s=s&&this.Check_Compare(o.value,_mdt[1],v2,_mdt[3]);
//生成提示文本
var cc;
switch (_mdt[1]){
case ">": cc='大于';break;
case ">=": cc='大于或等于';break;
case "<": cc='小于';break;
case "<=": cc='小于或等于';break;
case "!=": cc='不一至';break;
default: cc='一至';
}
if(!s){_Msg=(_mdt[1]=='='||_mdt[1]=='!=')?'必须和'+_mdt[2][1]+cc:'必须'+cc+_mdt[2][1];}
}
//日期格式验证
else if(_dt=='date'){
_mdt=_dataType[i].match(/^date\[(\d{4}[\-|\.|\/]\d{1,2}[\-|\.|\/]\d{1,2})?,(\d{4}[\-|\.|\/]\d{1,2}[\-|\.|\/]\d{1,2})?\]$/);
if(_mdt==null){s=s&&this.Validator[_dt][0].test(o.value);}
else{
min=_mdt?_mdt[1]:this.Validator[_dt][1];
max=_mdt?_mdt[2]:this.Validator[_dt][2];
s=s&&this.Validator[_dt][0].test(o.value)&&this.Check_Date(o.value,min,max);
}
}
//其它类型验证
else{
_mdt=_dataType[i].match(/^([^[]+)\[(\d*),(\d*)\]$/);
min=_mdt?_mdt[2]:this.Validator[_dt][1];
max=_mdt?_mdt[3]:this.Validator[_dt][2];
s=s&&this.Validator[_dt][0].test(o.value);
if(s){s=s&&this.Check_Num((_dt=='number'?o.value-0:strLength(o.value)),min,max);}
else{_Msg=this.Validator[_dt][3];}
}
//生成提示文本
if(_Msg==''&&!s)
{
if(min||max){
if(_dt=='number'){
_Msg=min&&max?'只能输入'+min+'-'+max+'范围数字':min?'只能输入大于'+min+'数字':'只能输入小于'+max+'数字';
}
else if(_dt=='date'){
_Msg=min&&max?'只能输入'+min+'至'+max+'范围日期':min?'只能输入大于'+min+'日期':'只能输入小于'+max+'日期';
}
else{
_Msg=min&&max?'需输入'+min+'-'+max+'个有效字符':min?'至少需输入'+min+'个有效字符':'最多只能输入'+max+'个有效字符';
}
}else{_Msg=this.Validator[_dt][3];}
}
}
}
if(s){this.AddCorrect(o,{msg:_Msg,msgCss:_msgCss,inCss:_inCss});}else{this.AddError(o,{msg:_Msg,msgCss:_msgCss,inCss:_inCss});}
return [s,_Msg];
},
//验证正确
AddCorrect:function(o,s){
var MsgTag=this.GetMsgBox(o);
MsgTag.innerHTML=s.msg||'';
this.vfSetCss(MsgTag,s.msgCss||this.Stat.msgCorrect,1);
this.vfSetCss(o,s.inCss||this.Stat.inCorrect,0);
},
//验证错误
AddError:function(o,s){
var MsgTag=this.GetMsgBox(o);
MsgTag.innerHTML=o.getAttribute('msg')||s.msg;
this.vfSetCss(MsgTag,s.msgCss||this.Stat.msgError,1);
this.vfSetCss(o,s.inCss||this.Stat.inError,0);
},
//获取/创建提示Box
GetMsgBox:function(o){
var MsgTag=GetID('vfMsgBox_'+o.name);
if(!MsgTag){
MsgTag=o.nextSibling;
while(MsgTag&&MsgTag.nodeType!=1){MsgTag=MsgTag.nextSibling;}
if(!MsgTag||MsgTag.tagName.toUpperCase()!=this.Stat.tag.toUpperCase()||!MsgTag.getAttribute('msgbox')){
MsgTag=creElm({},o.parentNode,this.Stat.tag);
MsgTag.setAttribute('msgbox','1');
if(o.nextSibling.nextSibling){o.parentNode.insertBefore(MsgTag,o.nextSibling);}
}
}
return MsgTag;
},
//验证值范围
Check_Num:function(v,min,max){
v=v||0;
if(min&&max){return v>=min-0&&v<=max-0;}
else if(min){return v>=min-0;}
else if(max){return v<=max-0;}
return true;
},
//值对比
//值,逻辑运算,对比值,对比类型[number-数字,date-日期,text-文本]
Check_Compare:function(v,operator,v2,DataType){
//为空时自动判断格式
if(!DataType){
if(this.Validator.number[0].test(v)){DataType='number';}
else if(this.Validator.date[0].test(v)){DataType='date';}
else{DataType='text'}
}
//数据格式转换
if(DataType=='number'){v-=0;v2-=0;}
else if(DataType=='date'){
var _mdt=v.match(this.Validator.date[0]);
if(_mdt==null){return false;}
v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
_mdt=v2.match(this.Validator.date[0]);
if(_mdt==null){return false;}
v2=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
}
switch (operator){
case ">": return v>v2;break;
case ">=": return v>=v2;break;
case "<": return v<v2;break;
case "<=": return v<=v2;break;
case "!=": return v!=v2;break;
default: return v==v2;
}
},
//日期验证范围
Check_Date:function(v,min,max){
var _mdt=v.match(this.Validator.date[0]);
if(_mdt==null){return false;}
v=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
_mdt=min.match(this.Validator.date[0]);
min=_mdt==null?null:new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
_mdt=max.match(this.Validator.date[0]);
max=_mdt==null?null:max=new Date(_mdt[2],_mdt[3]-1,_mdt[4])-new Date;
return this.Check_Num(v,min,max);
},
//设置样式
vfSetCss:function(o,css,s){
if(!s){
SetCss(o,this.Stat.inCorrect,'del');
SetCss(o,this.Stat.inError,'del');
SetCss(o,this.Stat.inFocus,'del');
}
if(s){o.className=css;}else{SetCss(o,css,'add');}
}
}
new ValidatorForm(GetID('theForm'));
</script>
希望本文所述对大家的javascript程序设计有所帮助。
相关推荐
-
jquery表单验证使用插件formValidator
1.首先在项目中添加必备js与css 2.代码中添加引用(必备引用) 复制代码 代码如下: <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库--> <script src="formValidator1/formValidator-4.0.1.min.js" type=&quo
-
jquery表单验证插件（jquery.validate.js）的3种使用方式
jquery 验证非常简单,下面总结常用的三种方式: 第一种方式:也是比较标准的方式: 首先引入jquery 插件和 jquery 验证插件: 第一步:引入插件 复制代码 代码如下: <script type="text/javascript" src="js/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="js/jq
-
jQuery表单验证插件解析(推荐)
一:插件 (1) Validform_v5.3.1_min.js Validform_Datatype.js (2)网址:http://validform.rjboy.cn 在这个网站上有demo和插件下载链接. 二:普通验证 (1)Validform_Datatype.js /* Validform datatype extension By sean during December 8, 2012 - February 20, 2013 For more information, pleas
-
jQuery formValidator表单验证插件开源了 含API帮助、源码、示例
2008-07-22 14:47 bug描述:ajaxValidator函数在提交后发生错误,停留在本页面后,再次触发校验会让提示内容一直处于onload状态. 这个bug已经修复,请重新下载. 2008/7/17 14:12:00 jQuery formValidator 3.1ver 1.为inputValidator增加empty属性.用于设置控件文本值是否允许两边为空.具体请看demo1里的密码的校验代码. 该属性是个对象,默认值{leftempty:true,rightempty:tr
-
jquery插件制作 表单验证实现代码
先下页面代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>&l
-
Jquery插件easyUi表单验证提交(示例代码)
复制代码 代码如下: <form id="myForm" method="post"> <table align="center" style="width:400px;height:auto;margin-top: 20px"> <tr> <td align="righ
-
JQuery表单验证插件EasyValidator用法分析
本文实例讲述了JQuery表单验证插件EasyValidator用法.分享给大家供大家参考.具体如下: 本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手. DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对不同用户特殊需求,自行写正则吧. EasyValidator实现的功能: 1.提示功能(在表单或者其他标签中加入tip="想提示的文字") 如: 复制代码 代码如下: <inp
-
jValidate 基于jQuery的表单验证插件
网上的各类表单验证插件的验证规则都是写在脚本里的,但我的插件的验证规则却是写在表单元素的属性里的.如下面的例子: 复制代码 代码如下: <input name="name" type="text" id="name" size="30" jvpattern="^.+$" jverrortip="请输入正确的姓名." jvtipid="spt_name" jvme
-
JS实现的通用表单验证插件完整实例
本文实例讲述了JS实现的通用表单验证插件.分享给大家供大家参考.具体如下: 这里演示一个通用的JS表单验证插件代码.使用方法:第一步:需设定表单项数据类型,第二步:实例表单验证,验证错误提示说明(程序有自带相关错误提示,可自定义每项验证错误提示时文本,只需添加msg). 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-normal-table-check-plug-codes/ 具体代码如下: <!DOCTYPE html PUBLIC &qu
-
JS实现的简单表单验证功能完整实例
本文实例讲述了JS实现的简单表单验证功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&
-
validationEngine 表单验证插件使用实例代码
先给大家展示下效果图,如果大家感觉不错,请参考实现代码: 废话少说,直接上代码,可拷贝直接运行: <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-
php封装的表单验证类完整实例
本文实例讲述了php封装的表单验证类.分享给大家供大家参考,具体如下: <?php //封装一个表单验证类 //中文验证.邮箱验证.电话号码.手机.QQ.身份证.(由字母.数字.下划线组成,不能以数字开头) header('content-type:text/html;charset=utf-8'); class Form{ /* //中文验证的方法 //参数:$str,$num1,$num2 //返回值:匹配成功返回匹配的次数 */ public function checkChina($st
-
自己编写的支持Ajax验证的JS表单验证插件
自己编写了一个表单验证插件,支持ajax验证,使用起来很简单. 每个需要验证的表单元素下面有一个span标签,这个标签的class有一个valid表示需要验证,如果有nullable则表示可为空:rule表示验证规则,msg表示错误提示信息:to表示要验证的元素的name值,如果元素是单个的,to可以不写.该插件会遍历每个有valid的span标签,找出它前面需要验证的元素,根据rule验证,如果验证不通过,则显示边框为红色,鼠标放在元素上时显示错误信息. 验证时机:1.点击提交按钮时显式调用验
-
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQuery插件之一,经过了全球范围内不同项目的验证,并得到了许多Web开发者的好评.作为一个标准的验证方法库,Validation拥有如下特点: 1.内置验证规则: 拥有必填.数字.Email.URL和信用卡号码等19类内置验证规则 2.自定义验证规则: 可以很方便地自定义验证规则 3.简单强大的验证
-
vue.js表单验证插件(vee-validate)的使用教程详解
综述 名称:vee-validate 用途:简单的 Vue.js 表单验证插件 官网:地址 github:地址 特别提示 配合laravel使用特别好使 因为验证规则和laravel后端的验证规则一样 插件既可以应用于SPA也可以应用于多页面,通用性强 安装 单页安装 npm install vee-validate --save 浏览器安装 <!-- unpkg --> <script src="https://unpkg.com/vee-validate@2.0.0-rc.
-
jQuery.validate.js表单验证插件的使用代码详解
Validate Validate是基于jQuery的一款轻量级验证插件,内置丰富的验证规则,还有灵活的自定义规则接口,HTML.CSS与JS之间的低耦合能让您自由布局和丰富样式,支持input,select,textarea的验证. 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="vi
-
JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】
本文实例讲述了JS表单验证插件之数据与逻辑分离操作.分享给大家供大家参考,具体如下: 之前已经写过一个表单验证插件了,为什么还会重复造轮子呢?第一个问题是代码结构比较乱,虽然通过原型继承的写法将处理分层,但业务逻辑和数据结构混杂在一起,导致第二个问题--可扩展性和灵活性差. 认真分析表单验证的过程,可以分为两步:怎么验证和如何验证.怎么验证是数据层面的问题,如何验证是业务逻辑层面的问题. 点击:这里 查看源码 策略模式将对象和规则区分 如何让算法(数据层)和对象(逻辑层)分开来,使得算法可以独立
-
Vue表单验证插件的制作过程
前言 前段时间,老大搭好了Vue的开发环境,于是我们愉快地从JQ来到了Vue.这中间做的时候,在表单验证上做的不开心,看到vue的插件章节,感觉自己也能写一个,因此就自己开始写了一个表单验证插件va.js. 当然为什么不找个插件呢? vue-validator呀. 1.我想了下,一个是表单验证是个高度定制化的东西,这种网上找到的插件为了兼顾各个公司的需求,所以加了很多功能,这些我们不需要.事实证明,vue-validator有50kb,而我写的va.js只有8kb. 2.另一个是,vue-val