在学到jquery-validate时,感觉还是不错的,老外的,但感觉分组校验时不是很好,
于是搜索了下,找到了这个国产的jquery表单校验插件,用了下感觉还是不错的,
所以推荐下,地址是:
http://www.yhuan.com/formvalidator/userguide.html
该作者的blog地址是:http://www.cnblogs.com/wzmaodong/archive/2008/01/11/1034901.html
下面简单讲解下,比如一个常见的情景是,一个页面中,分两部分(两个组),比如一边是
用户注册的表单,一边是用户登陆的表单,则可以认为是两个分组,比如以简单的对某个文本框的校验为例:
密码:<input name="tbxLoginPassword" maxlength="50" id="tbxLoginPassword" type="password">
<div style="display: none;" id="loginPassword"></div>
<div class="onError"><span id="cvlLoginUser" style="color: Red; display: none;">用户名或密码错误</span></div>
使用时:
//加载jQuery类库
<script src="jquery_last.js" type="text/javascript"></script>
//加载插件的样式库,如果你是自动构建提示层,请加载validatorAuto.css
<link type="text/css" rel="stylesheet" href="style/validator.css"></link>
//加载插件
<script src="formValidator.js" type="text/javascript"></script>
//加载扩展库
<script src="formValidatorRegex.js" type="text/javascript"></script>
<script type="text/javascript">
$(
function()
{
$.formValidator.initConfig(
{
autotip: true,
validatorgroup: "1"
});
$("#tbxLoginPassword")
.formValidator(
{
validatorgroup: "1",
tipid: "loginPassword",
onshow: "",
onfocus: "",
oncorrect: ""
})
.inputValidator(
{
min: 1,
onerror: "请填写密码"
});
$("#tbxLoginVerifier")
.formValidator(
{
validatorgroup: "1",
tipid: "loginVerifier",
onshow: "",
onfocus: "",
oncorrect: ""
})
.inputValidator(
{
min: 1,
onerror: "请填写验证码"
});
$.formValidator.initConfig(
{
autotip: true,
validatorgroup: "2"
});
$("#tbxRegisterNickname")
.formValidator(
{
validatorgroup: "2",
tipid: "registerNickname",
onshow: "4-20位字符,可由中英文、数字及“_”、“-”组成",
onfocus: "",
oncorrect: ""
})
.inputValidator(
{
min: 4,
max: 20,
onerror: "用户名长度只能在4-20位字符之间"
})
.regexValidator(
{
regexp: "username",
datatype: "enum",
onerror: "用户名只能由中英文、数字及“_”、“-”组成"
});
//if ($("#hflRegisterNickname").val() != "true")
//{
$("#tbxRegisterNickname")
.ajaxValidator(
{
type: "GET",
url: '<?php echo site_url('login/check_name')?>',
datatype: "json",
success:
function(result)
{
return result.Result;
},
buttons: $("#ibtRegister"),
onwait: "正在检测用户名是否重复...",
onerror: "该用户名已被使用"
});
这里,演示了使用两个组(两个表单中有不同的控件)的使用,其中,只需要
validatorgroup: "1",(或2)去指定即可,十分方便. 这里还演示了使用
ajax提交验证的例子,使用的是ajaxValidator方法.
总的来说,还是十分简单,这个控件,而且在各浏览器下运行得不错,属于可以
支持的国产jquery插件