JS验证框架用过很多，都是感觉配置麻烦，完成的效果不尽人意，从PHPCMS V9 源码中看到，他采用了 JS框架来验证表单。
jQuery formValidator
// [作者网名] 猫冬
// [邮 箱] wzmaodong@126.com
// [作者博客] http://wzmaodong.cnblogs.com
此JS框架内置了很多常用正则规则，还可以自己拓展很方便。
配置简单，功能强大。
<form method="post" id="signUp" name="signUp" action="?action=save&id=<?=$id?>&tid=<?=$tid?>" onsubmit="return checkForm();" enctype="multipart/form-data">
<table>
<tr>
<td width="15%">姓名：</td>
<td width="65%"><input type="text" name="name" id="name"></td>
<td width="20%"><span id="nameTip"></span></td>
</tr>
<tr>
<td>年龄：</td>
<td><input type="text" name="age" id="age"></td>
<td><span id="ageTip"></span></td>
</tr><tr>
<td>性别：</td>
<td>
<select name="sex" id="sex">
<option value="1" selected="selected">男</option>
<option value="2">女</option>
</select>
</td>
<td></td>
</tr><tr>
<td>相片：</td>
<td><input type="file" name="image" ></td>
<td><span>可上传的图片格式为jpg,gif,png,bmp 2M以内</span></td>
</tr>
<tr>
<td>密码：</td>
<td><input type="password" name="pwd" id="pwd"></td>
<td><span id="pwdTip"></span></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input type="password" name="pwd2" id="pwd2"></td>
<td><span id="pwd2Tip"></span></td>
</tr>
<tr>
<td>证件号：</td>
<td><input type="text" name="user_ID" id="user_ID"></td>
<td><span id="user_IDTip"></span></td>
</tr>
<tr>
<td>职业：</td>
<td><input type="text" name="job" id="job"></td>
<td><span id="jobTip"></span></td>
</tr><tr>
<td>地址：</td>
<td><input type="text" name="addr" id="addr"></td>
<td><span id="addrTip"></span></td>
</tr>
<tr>
<td>学历：</td>
<td><input type="text" name="education" id="education"></td>
<td><span id="educationTip"></span></td>
</tr>
<tr>
<td>报班类别：</td>
<td>
<?php foreach($dicArr as $dic){?>
<input type="checkbox" class="ch" name="type[]" id="ch<?=$i++?>" value="<?=$dic['key']?>"><?=$dic['key']?>
<?php }?></td>
<td><span id="typeTip"></span></td>
</tr>
<tr>
<td>电话：</td>
<td><input type="text" name="tel" id="tel"></td>
<td><span id="telTip"></span></td>
</tr>
<tr>
<td>备注：</td>
<td>
<textarea rows="4" cols="15" id="note" name="note" style="width:600px;"></textarea>
</td>
<td><span id="noteTip"></span></td>
</tr>
<tr>
<td>操作：</td>
<td>
<input type="submit" value="提交" >
<input type="reset" value="重置" >
</td>
</tr>
</table>
</form>
<!-- Validator 表单验证所需 -->
<script type="text/javascript" src="images/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="images/formValidatorRegex.js"></script>
<script type="text/javascript" src="images/formValidator.js"></script>
<link href="images/validator.css" rel="stylesheet" />
<style>
#signUp span {
display: block;
width: 150px;
font-size:12px;
}
</style>
<!--//Validator-->
<script type="text/javascript">
<!--
//注册表单
$.formValidator.initConfig({formid:"signUp",debug:false,submitonce:false
});
//字段验证
$("#name").formValidator({onshow:"请输入您的姓名",onfocus:"姓名只可以是中文",oncorrect:"输入正确"}).regexValidator({regexp:regexEnum.chinese,onerror:"输入有误"});
$("#pwd").formValidator({onshow:"请输入密码",onfocus:"至少1个长度",oncorrect:"密码合法"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"密码两边不能有空符号"},onerror:"密码不能为空,请确认"});
$("#age").formValidator({onshow:"请输入年龄",onfocus:"1-120",oncorrect:"输入正确",defaultvalue:"20"}).regexValidator({regexp:"^\\d{2}$",onerror:"输入有误"});
$("#pwd2").formValidator({onshow:"输再次输入密码",onfocus:"至少1个长度",oncorrect:"密码一致"}).inputValidator({min:1,empty:{leftempty:false,rightempty:false,emptyerror:"重复密码两边不能有空符号"},onerror:"重复密码不能为空,请确认"}).compareValidator({desid:"pwd",operateor:"=",onerror:"密码不一致,请确认"});
$("#user_ID").formValidator({onshow:"请输入15或18位的身份证",onfocus:"输入15或18位的身份证",oncorrect:"输入正确"}).functionValidator({fun:isCardID});
$("#job").formValidator({onshow:"请输入职业",onfocus:"至少1个长度",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空,请确认"});
$("#addr").formValidator({onshow:"请输入地址",onfocus:"至少1个长度",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空,请确认"});
$("#education").formValidator({onshow:"请输入学历",onfocus:"至少1个长度",oncorrect:"输入正确"}).inputValidator({min:1,onerror:"不能为空,请确认"});
$(".ch").formValidator({tipid:'typeTip',onshow:"请选择类别",onfocus:"至少选择一个",oncorrect:"选择正确"}).inputValidator({min:1,onerror:"至少选择一个"});
//
-->
</script>
- 上一篇：日期选择控件可拖动
- 下一篇：Ext Js Jquery 类库冲突