>

formValidator表单验证

- 编辑:乐百家599手机首页 -

formValidator表单验证

1.第一在品种中增多必备js与css

formValidator表单验证,formvalidator表单

html部分:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名:</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码:</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区:</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证:</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码:</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组,暗许值为1
onSuccess : function(){ //验证成功后的回调函数

},
onError:function(){ //验证战败后的回调函数

}
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1
onEmpty : '客商名无法为空', //提醒客商名不可能为空
onShow : "",
onFocus : '顾客名必需为1到12个人的数字或字母',//表单元素获得主旨的时候提醒应输入的格式
onCorrect : '客户名输入精确' //输入精确的提示
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表明式
onError : '顾客名格式有误,请从新输入' //输入错误的升迁
})
.ajaxValidator({ //验证输入的顾客名是还是不是已经存在
dataType : 'html', //央求数据的格式
async : true, //异步格局
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该客户名已存在,请从新输入',
onWait : '正在对客商名张开合法性校验,请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能为空',
onShow : "",
onFocus : '密码必得为6位以上的假名或数字',
onCorrect : '密码输入精确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误,请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不能够为空',
onShow : "",
onFocus : '密码必得为6位以上的假名或数字',
onCorrect : '密码输入准确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不准确'
})
.compareValidator({ //相比较三遍输入内容是还是不是相符上面给出的可比符号
desID : 'pwd', //相相比较的表单成分的ID值
operateor : '=', //要相比的多个因素之间的涉嫌
onError : '几回密码输入差别等,请从新输入' //不满足以上关联的时候的升迁
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '居民身份证不能为空',
onShow : '',
onFocus : '请输入您的身份ID号',
onCorrect : '居民身份证格式准确'
}).regexValidator({
regExp : '^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$',
//16位居民身份证号码的正则表明式/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/
onError : '居民身份证格式有误,请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手提式有线话机号码不能够为空',
onShow : '',
onFocus : '请输入您的手提式有线电话机号码',
onCorrect : '手机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手提式有线电话机号码格式有误,请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址无法为空',
onShow : '',
onFocus : '请输入您的信箱地址',
onCorrect : '邮箱格式精确'
})
.regexValidator({
regExp : '^\w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$',
onError : '邮箱格式有误,请从新输入'
});
</script>
</body>
</html>

php部分代码:

<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i ) {
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>

html部分: !DOCTYPE html html lang="en" head meta charset="UTF-8" titleformValidator/title script src="js/jquery-1.11.1.js"/scrip...

html部分:

图片 1 
2.代码中增加引用(必备援用)

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>formValidator</title>
<script src="js/jquery-1.11.1.js"></script>
<script src="js/formValidator-4.0.1.min.js"></script>
<script src="js/DateTimeMask.js"></script>
<script src="js/formValidatorRegex.js"></script>
<link rel="stylesheet" href="css/validator.css">
<style>
form{
width: 500px;
margin: 100px auto;
}
table tr td:first-child{
text-align: right;
}
table tr td{
padding: 5px 0;
}
div{
margin-left: 10px;
padding: 0 10px;
}
</style>
</head>
<body>
<form name="myfm" id="myfm" action="1.html">
<table>
<tbody>
<tr>
<td><label for="uname">用户名:</label></td>
<td><input type="text" id="uname" name="uname"/></td>
<td><div id="unameTip"></div></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td><input type="password" id="pwd" name="pwd"/></td>
<td><div id="pwdTip"></div></td>
</tr>
<tr>
<td><label for="repwd">重复密码:</label></td>
<td><input type="password" name="repwd" id="repwd"/></td>
<td><div id="repwdTip"></div></td>
</tr>
<tr>
<td><label>性别:</label></td>
<td>
<input type="radio" name="sex" value="male" id="male"/>
<label for="male">男</label>
<input type="radio" name="sex" value="female" id="female"/>
<label for="female">女</label>
</td>
</tr>
<tr>
<td><label for="area">地区:</label></td>
<td>
<select name="area" id="area">
<option value="0">- 请选择 -</option>
<option value="1">锦江区</option>
<option value="2">金牛区</option>
<option value="3">龙泉驿区</option>
<option value="4">青羊区</option>
</select>
</td>
</tr>
<tr>
<td><label for="num">身份证:</label></td>
<td><input type="text" id="num" name="num"/></td>
<td><div id="numTip"></div></td>
</tr>
<tr>
<td><label for="phone">电话号码:</label></td>
<td><input type="text" name="phone" id="phone"/></td>
<td><div id="phoneTip"></div></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td><input type="text" name="email" id="email"/></td>
<td><div id="emailTip"></div></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" id="submit" value="提交"/></td>
<td></td>
</tr>
</tbody>
</table>
</form>
<script>
$.formValidator.initConfig({ //用于配置当前formValidator插件
formID:"myfm",
debug:false,
submitOnce:true,
validatorGroup : '1', //设置验证组,暗中同意值为1
onSuccess : function(){ //验证成功后的回调函数

复制代码 代码如下:

},
onError:function(){ //验证战败后的回调函数

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script> <!--jquery必须库-->
<script src="formValidator1/formValidator-4.0.1.min.js" type="text/javascript"></script> <!--表单验证必需库-->
<script src="formValidator1/formValidatorRegex.js" type="text/javascript"></script> <!--表单验证扩充库-->
<link href="formValidator1/style/validator.css" rel="stylesheet" type="text/css" /><!--表单验证样式表-->

}
});
$('#uname').formValidator({
ValidatorGroup : '1', //验证组为1
onEmpty : '客户名无法为空', //提醒客户名无法为空
onShow : "",
onFocus : '客户名必需为1到十位的数字或字母',//表单成分别得到得核心的时候提醒应输入的格式
onCorrect : '客商名输入准确' //输入正确的唤醒
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{1,12}$', //验证表单输入的正则表达式
onError : '顾客名格式有误,请从新输入' //输入错误的唤起
})
.ajaxValidator({ //验证输入的客户名是不是早就存在
dataType : 'html', //诉求数据的格式
async : true, //异步模式
url : 'test.php',
success : function(data){
if (data=='false') {
return false;
}else{
return true;
}
},
onError : '该客户名已存在,请从新输入',
onWait : '正在对顾客名张开合法性校验,请稍候...'
});
$('#pwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码无法为空',
onShow : "",
onFocus : '密码必需为6位以上的假名或数字',
onCorrect : '密码输入准确'
})
.regexValidator({
regExp : '[0-9a-zA-Z]{6,}',
onError : '密码格式有误,请从新输入'
});
$('#repwd').formValidator({
ValidatorGroup : '1',
onEmpty : '密码不可能为空',
onShow : "",
onFocus : '密码必得为6位以上的假名或数字',
onCorrect : '密码输入正确'
})
.regexValidator({
regExp : '^[0-9a-zA-Z]{6,}$',
onError : '密码格式不科学'
})
.compareValidator({ //比较三次输入内容是不是符合下边给出的可比符号
desID : 'pwd', //绝相比的表单成分的ID值
operateor : '=', //要相比的多个成分之间的关系
onError : '几次密码输入差异等,请从新输入' //不满足以上关联的时候的唤起
});
$('#num').formValidator({
ValidatorGroup : '1',
onEmpty : '居民身份证不可能为空',
onShow : '',
onFocus : '请输入您的身份ID号',
onCorrect : '居民身份证格式准确'
}).regexValidator({
regExp : '^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{4}$',
//14个人身份ID编号的正则表明式/^[1-9]d{7}((0d)|(1[0-2]))(([0|1|2]d)|3[0-1])d{3}$/
onError : '身份ID格式有误,请从新输入'
});
$('#phone').formValidator({
ValidatorGroup : '1',
onEmpty : '手提式有线电话机号码不可能为空',
onShow : '',
onFocus : '请输入您的手提式有线电话机号码',
onCorrect : '手提式有线电话机号码格式正确',
})
.regexValidator({
regExp : '^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$',
onError : '手提式无线电话机号码格式有误,请从新输入'
});
$('#email').formValidator({
ValidatorGroup : '1',
onEmpty : '邮箱地址无法为空',
onShow : '',
onFocus : '请输入您的信箱地址',
onCorrect : '邮箱格式准确'
})
.regexValidator({
regExp : '^\w ([- .]\w )*@\w ([-.]\w )*\.\w ([-.]\w )*$',
onError : '邮箱格式有误,请从新输入'
});
</script>
</body>
</html>

3.<body>中要表明的标签(做一些常用的示范)

php部分代码:

复制代码 代码如下:

<?php
header('Content-Type:html');
$name=array('Tom','ervin','Jhon');
$uname=$_REQUEST['uname'];
$notexit='true';
for ($i=0; $i <3 ; $i ) {
if ($uname==$name[$i]) {
$notexit='false';
break;
}else{
}
}
echo "$notexit";
?>

<table border="0px" style="font-size:12px">
<tr>
<td colpan="3"><input type="submit" name="button" id="button" value="提交" /></td>
</tr>
<tr>
<td align="right">居民身份证(正则表明式库):</td>
<td><input name="sfz" type="text" id="sfz" /></td>
<td><div id="sfzTip" style="width:300px"></div></td> <!--必得小心这里提示验证新闻中的div的id值,跟要表明控件中的id值多了多个Tip,上边包车型大巴都以这么。必得多的是Tip,也无法不要多。-->
</tr>
<tr>
<td align="right">身份ID(外界函数):</td>
<td><input type="text" id="sfz1" style="width:120px" /></td>
<td><div id="sfz1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">整数:</td>
<td><input type="text" id="zs" style="width:120px" /></td>
<td><div id="zsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正整数:</td>
<td><input type="text" id="zzs" style="width:120px" /></td>
<td><div id="zzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负整数:</td>
<td><input type="text" id="fzs" style="width:120px" /></td>
<td><div id="fzsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">数字:</td>
<td><input type="text" id="sz" style="width:120px" /></td>
<td><div id="szTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正数(正整数 0):</td>
<td><input type="text" id="zs1" style="width:120px" /></td>
<td><div id="zs1Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负数(负整数 0):</td>
<td><input type="text" id="fs" style="width:120px" /></td>
<td><div id="fsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">浮点数:</td>
<td><input type="text" id="fds" style="width:120px" /></td>
<td><div id="fdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">正浮点数:</td>
<td><input type="text" id="zfds" style="width:120px" /></td>
<td><div id="zfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">负浮点数:</td>
<td><input type="text" id="ffds" style="width:120px" /></td>
<td><div id="ffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非负浮点数(正浮点数 0):</td>
<td><input type="text" id="fffds" style="width:120px" /></td>
<td><div id="fffdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非正浮点数(负浮点数 0):</td>
<td><input type="text" id="fzfds" style="width:120px" /></td>
<td><div id="fzfdsTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">颜色:</td>
<td><input type="text" id="ys" style="width:120px" /></td>
<td><div id="ysTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">你的EMAIL:</td>
<td><input type="text" id="email" style="width:120px" /></td>
<td><div id="emailTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">手机:</td>
<td><input type="text" id="sj" style="width:120px" /></td>
<td><div id="sjTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">邮编:</td>
<td><input type="text" id="yb" style="width:120px" /></td>
<td><div id="ybTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">非空:</td>
<td><input type="text" id="fk" style="width:120px" /></td>
<td><div id="fkTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">图片:</td>
<td><input type="text" id="tp" style="width:120px" /></td>
<td><div id="tpTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">压缩文件:</td>
<td><input type="text" id="rar" style="width:120px" /></td>
<td><div id="rarTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">ip4:</td>
<td><input type="text" id="ip4" style="width:120px" /></td>
<td><div id="ip4Tip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">QQ号码:</td>
<td><input type="text" id="qq" style="width:120px" /></td>
<td><div id="qqTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">国内电话:</td>
<td><input type="text" id="dh" style="width:120px" /></td>
<td><div id="dhTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">用户名:</td>
<td><input type="text" id="yhm" style="width:120px" /></td>
<td><div id="yhmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">字母:</td>
<td><input type="text" id="zm" style="width:120px" /></td>
<td><div id="zmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">大写字母:</td>
<td><input type="text" id="dxzm" style="width:120px" /></td>
<td><div id="dxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">小写字母:</td>
<td><input type="text" id="xxzm" style="width:120px" /></td>
<td><div id="xxzmTip" style="width:300px"></div></td>
</tr>
<tr>
<td align="right">身份证:</td>
<td><input type="text" id="sfz" style="width:120px" /></td>
<td><div id="sfzTip" style="width:300px"></div></td>
</tr>
</table>

4.<script>中的代码

复制代码 代码如下:

<script type="text/javascript">
$(document).ready(function () {
$.formValidator.initConfig({ formID: "form1", onError: function () { alert("校验未有通过,具体错误请看错误提醒") } });
$("#sfz").formValidator({ onShow: "请输入15或二十一位的居民身份证", onfocus: "输入15或拾五人的身份ID", onCorrect: "输入正确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "你输入的身份ID格式不科学" }); ;
$("#sfz1").formValidator({ onShow: "请输入15或拾陆位的居民身份证", onfocus: "输入15或17个人的身份ID", onCorrect: "输入准确" }).functionValidator({ fun: isCardID });
$("#zs").formValidator({ onShow: "请输入整数", onCorrect: "谢谢你的搭档,你的板寸正确" }).regexValidator({ regExp: "intege", dataType: "enum", onError: "整数格式不精确" });
$("#zzs").formValidator({ onShow: "请输入正整数", onCorrect: "感激您的通力合营,你的正整数正确" }).regexValidator({ regExp: "intege1", dataType: "enum", onError: "正整数格式不科学" });
$("#fzs").formValidator({ onShow: "请输入负整数", onCorrect: "谢谢您的通力同盟,你的负整数精确" }).regexValidator({ regExp: "intege2", dataType: "enum", onError: "负整数格式不科学" });
$("#sz").formValidator({ onShow: "请输入数字", onCorrect: "谢谢您的合营,你的数字精确" }).regexValidator({ regExp: "num", dataType: "enum", onError: "数字格式不得法" });
$("#zs1").formValidator({ onShow: "请输入正数", onCorrect: "多谢你的合营,你的正数正确" }).regexValidator({ regExp: "num1", dataType: "enum", onError: "正数格式不得法" });
$("#fs").formValidator({ onShow: "请输入负数", onCorrect: "谢谢您的合作,你的负数正确" }).regexValidator({ regExp: "num2", dataType: "enum", onError: "负数格式不正确" });
$("#sj").formValidator({ onShow: "请输入你的手提式有线电话机号码", onfocus: "必须是13或15当先哦", onCorrect: "感谢您的通力同盟,你的手提式有线电话机号码准确" }).regexValidator({ regExp: "mobile", dataType: "enum", onError: "手提式无线话机号码格式不得法" });
//$("#").formValidator({onShow:"",onfocus:"请输入",onCorrect:"多谢您的同盟,你的正确性"}).regexValidator({regExp:"",dataType:"enum",onError:"格式不得法"});
$("#email").formValidator({ onShow: "请输入你的email", onfocus: "请留神你输入的email格式,举个例子:[email protected]", onCorrect: "感谢您的通力合营,你的email准确" }).regexValidator({ regExp: "email", dataType: "enum", onError: "email格式不正确" });
$("#fds").formValidator({ onShow: "请输入浮点数", onCorrect: "多谢您的通力同盟,你的浮点数正确" }).regexValidator({ regExp: "decmal", dataType: "enum", onError: "浮点数格式不科学" });
$("#zfds").formValidator({ onShow: "请输入正浮点数", onCorrect: "多谢你的同盟,你的正浮点数正确" }).regexValidator({ regExp: "decmal1", dataType: "enum", onError: "正浮点数格式不科学" });
$("#ffds").formValidator({ onShow: "请输入负浮点数", onCorrect: "多谢你的同盟,你的负浮点数无误" }).regexValidator({ regExp: "decmal2", dataType: "enum", onError: "负浮点数格式不科学" });
$("#fffds").formValidator({ onShow: "请输入非负浮点数", onCorrect: "谢谢您的同盟,你的非负浮点数准确" }).regexValidator({ regExp: "decmal4", dataType: "enum", onError: "非负浮点数格式不得法" });
$("#fzfds").formValidator({ onShow: "请输入非正浮点数", onCorrect: "多谢您的搭档,你的非正浮点数准确" }).regexValidator({ regExp: "decmal5", dataType: "enum", onError: "非正浮点数格式不得法" });
$("#ys").formValidator({ onShow: "请输入16进制颜色", onCorrect: "感激你的搭档,你的16进制颜色准确" }).regexValidator({ regExp: "color", dataType: "enum", onError: "16进制颜色格式不得法" });
$("#yb").formValidator({ onShow: "请输入邮编", onfocus: "6位数字构成的啊", onCorrect: "多谢你的合营,你的邮编正确" }).regexValidator({ regExp: "zipcode", dataType: "enum", onError: "邮政编码格式不科学" });
$("#ip4").formValidator({ onShow: "请输入ip4", onfocus: "比方:172.16.201.18", onCorrect: "多谢您的搭档,你的ip4准确" }).regexValidator({ regExp: "ip4", dataType: "enum", onError: "ip4格式不科学" });
$("#fk").formValidator({ onShow: "请输入非空字符", onCorrect: "谢谢你的搭档,你的非空字符正确" }).regexValidator({ regExp: "notempty", dataType: "enum", onError: "非空字符格式不得法" });
$("#tp").formValidator({ onShow: "请输入图片名", onCorrect: "多谢你的通力协作,你的图纸名科学" }).regexValidator({ regExp: "picture", dataType: "enum", onError: "图片名格式不得法" });
$("#rar").formValidator({ onShow: "请输入压缩文件名", onCorrect: "多谢您的通力合营,你的压缩文件名科学" }).regexValidator({ regExp: "rar", dataType: "enum", onError: "压缩文件名格式不得法" });
$("#qq").formValidator({ onShow: "请输入QQ号码", onCorrect: "谢谢你的合营,你的QQ号码准确" }).regexValidator({ regExp: "qq", dataType: "enum", onError: "QQ号码格式不准确" });
$("#dh").formValidator({ onShow: "请输入国内电话", onfocus: "比方:0577-88888888或省略区号88888888", onCorrect: "多谢你的搭档,你的境内电话准确" }).regexValidator({ regExp: "tel", dataType: "enum", onError: "本国电话格式不科学" });
$("#yhm").formValidator({ onShow: "请输入客户名", onCorrect: "谢谢您的协作,你的客户名科学" }).regexValidator({ regExp: "username", dataType: "enum", onError: "客户名格式不科学" });
$("#zm").formValidator({ onShow: "请输入字母", onCorrect: "多谢你的合营,你的假名准确" }).regexValidator({ regExp: "letter", dataType: "enum", onError: "字母格式不科学" });
$("#dxzm").formValidator({ onShow: "请输入大写字母", onCorrect: "感激你的合作,你的大写字母准确" }).regexValidator({ regExp: "letter_u", dataType: "enum", onError: "大写字母格式不得法" });
$("#xxzm").formValidator({ onShow: "请输入小写字母", onCorrect: "多谢你的通力合作,你的小写字母正确" }).regexValidator({ regExp: "letter_l", dataType: "enum", onError: "小写字母格式不科学" });
$("#sfz").formValidator({ onShow: "请输入身份ID", onCorrect: "多谢你的搭档,你的居民身份证精确" }).regexValidator({ regExp: "idcard", dataType: "enum", onError: "身份ID格式不得法" });
});
</script>

5.效果图:

图片 2 
6.<script>中等校园函授数参数表达:

formValidator:

用来做开端化的花色,必需先施行。("√"为showalert可用参数)

属性 属性名称 默认值 showalert 详细解释
validatorgroup 校验组 "1" 一个页面的控件可以分成多个组,分开校验
empty 是否可以为空 false  
automodify 输入错误离开焦点的时候,自动修复错误 true 先给出提示然后,自动修复,目前只支持text、file、textarea三种类型
onempty 空时候的提示 "输入内容为空"   可以为空,为空时候的提示。为空者不显示
onshow 显示时候的提示 "请输入内容"   为空者不显示
onfocus 获得焦点的提示 "请输入内容"   为空者不显示
oncorrect 输入正确后的提示 "输入正确"   当你焦点离开控件的时候,如果输入正确将出现该提示。为空者不显示
tipid 显示错误的容器ID 表单ID "Tip"   如果不自动构建提示层,表示提示成的ID号
如果自动构建提示层,表示提示层相对的目标控件
tipcss 自动构建的提示层的样式 "left":"10px",
"top":"1px",
"height":"20px",
"width":"250px"
  主要用于定位自动构建的提示层
forcevalid 强制输入的值必须有效 true 是否把一个全角字符当做2个长度的参数
ajax 提交服务器 true ajaxValidator是否把该表单提交给服务器
defaultvalue 默认值 null 所有input和select表单。如果你不设置就保持原值,一旦设置就设为默认值。
triggerevent 默认值 blur 当前支持2种属性值:
blur:失去焦点的时候触发
change:当输入框里的值发生改变的时候触发

 

 

 

 

inputValidator:

 

属性 属性名称 默认值 详细解释
type 比较类型 "size" (对select无效)
"size":表示比较长度 ,默认值
"number":数值型比较
"string":字符型比较
"date":短日期类型
"datetime":长日期类型
min 最小长度/值 0 默认数值型。如果进行字符比较,请收入字符型
对select-one而言inputValidator里的参数min和max表示选择的索引号范围
对select-multiple而言inputValidator里的参数min和max表示选择的个数
max 最大长度/值 99999999999 同上
onerror 发生错误的提示 "输入错误" 为空者不显示。
onerrormin 比min属性小的提示 null 当用户输入的值比min属性小的时候的错误提示
onerrormax 比max属性大的提示 null 当用户输入的值比max属性大的时候的错误提示
empty 控件文本值是否允许两边为空 两边都允许出现空 默认值{leftempty:true,rightempty:true,emptyerror:null}
leftempty:表示左边是否允许为空
rightempty:表示右边是否允许为空
emptyerror:出现该错误的时候的提示,如果为null,则利用onerror属性来提示错误。

 

 

 

 

compareValidator:

 

属性 属性名称 默认值 详细解释
desid 要比较控件的ID "" 要跟源目标进行比较的目标ID
operateor 比较符号 "=" 一共有如下几种类型:=、!=、>、>=、<、<=
datatype 数据类型 "string" 目前只支持2种:"string"、"number","datetime","date"
onerror 发生错误的提示 "输入错误" 为空者不显示。

 

 

 

 

regexValidator:

 

属性 属性名称 默认值 详细解释
regexp 正则表达式或表达式数组 "" 采用的是显式构造函数new RegExp("pattern"[,"flags"]); 由于Javascript 中'' 被用作转义字符,所以在使用显示构造函数构造实例对象的时候,需要使用'\' 代替''
param 附加参数 "i" g:代表可以进行全局匹配。
i:代表不区分大小写匹配。
m:代表可以进行多行匹配。
可以任意组合,当然也可以不加参数
comparetype 比较类型 "||" "||"或的关系   "&&"并列
datatype 数据类型 "string" "string":自己写的表达式,"enum":枚举名。具体请见demo3.htm
你可以自己修改、添加formValidatorRegex.js里的枚举项目名和表达式。
onerror: 发生错误的提示 "输入错误" 为空者不显示。

 

 

 

 

ajaxValidator:

大致具有的性子跟$.ajax()的属性同样,请参照他事他说加以考察$.ajax()函数的帮衬

属性 属性名称 默认值 详细解释
type 请求的类型 "GET" "POST" 或 "GET"
url 发送到的URL地址 "" 在服务器端,你可以通过name为clientid获取触发验证的控件ID名
datatype 返回的数据类型 "html" xml、html、script、json、text
timeout 超时设置 999  
data 数据 ""  
async 是否以异步的方式发送 true  
success 当请求成功时调用的函数 null  
processdata 自动处理返回的数据为字符串 true 在默认的情况下,如果data选项传进的数据是一个对象而不是字符串,将会自动地被处理和转换成一个查询字符串
complete 当请求完成时调用的函数 null  
beforesend 当请求前时调用的函数 null 有个一个参数,根$.ajax里的beforeSend参数一样。
buttons 你点提交的按钮(组)jQuery对象 null 当你触发了ajax校验,buttons里对应的按钮(组)就会灰掉,一直等待服务器返回数据为止
error 当请求失败时调用的函数 "请求失败" 你可以自己定义这个错误,在error里自动打出。为空者不显示。

 

functionValidator

本文由乐百家前段发布,转载请注明来源:formValidator表单验证