welcome to xlongwei.com

欢迎大家一起学习、交流、分享


QQ:9167702333 邮箱:admin@xlongwei.com

jquery.validate.js remote远程调用校验


分类 Java   关键字 分享   标签 web   jquery   发布 hongwei  1442473504461
注意 转载须保留原文链接,译文链接,作者译者等信息。  
jquery.validate.js的remote规则非常适合调用远程接口校验比较复杂的数据类型,比如身份证、银行卡号、车牌号、企业营业执照号、税务登记号等,幸运的是笔者已经提供这些数据类型的校验接口,这里就介绍一下如何使用remote校验调用本站提供的校验接口。

引入js脚本,其中metadata.js用于支持class="{required:true}"
<script type="text/javascript" src="http://s.xlongwei.com/res/js/jquery/jquery.js"></script>
<script type="text/javascript" src="http://s.xlongwei.com/res/js/jquery/jquery.metadata.js"></script>
<script type="text/javascript" src="http://s.xlongwei.com/res/js/jquery/jquery.validate.js"></script>
<script type="text/javascript" src="http://s.xlongwei.com/res/js/jquery/jquery.messages.js"></script>

表单代码
<form action="" class="ui-form" method="post">
<div class="item">
<label for="" class="u-label">用户名:</label>
<input type="text" class="u-input w170" name="username" id="username" value="" />
</div>
<div class="item">
<input type="submit">
</div>
</form>

校验代码,type=one of numbers数字 decimal小数 money金额 identifier用户名 chinese汉字 email邮箱 tel电话 mobile手机 ip地址 url网址 idNumber身份证号 organizationCode组织机构代码 taxRegistrationNo税务登记号 plateNumber车牌号 bankCardNumber银行卡号,还有需要校验的类型可以发表评论。
<script type="text/javascript">
$(function(){
$("form").validate({
rules:{
username:{
required:true,
remote: {
url: "http://cms.xlongwei.com/open/validate.json",
type: "post",
data: {
type: "identifier",//数据类型
value: function() { //这里必须是function,否则每次校验时提交的值不是最新的
return $("input[name='username']").val();
}
}
}
}
}
});
})
</script>

效果截图,identifier要求是必须以字母或下划线开头


使用metadata样式
<script type="text/javascript">
$(function(){
$("form").validate();
})
</script>
<form action="" class="ui-form" method="post">
<div class="item">
<label for="" class="u-label">用户名:</label>
<input type="text" class="u-input w170 {required:true,remote:{url:'http://cms.xlongwei.com/open/validate.json',type:'post',data:{type:'identifier',value:function(){ return $('input[name=\'username\']').val(); }}}}" name="username" value="" />
</div>
<div class="item">
<input type="submit">
</div>
</form>

怎么样,是不是很方便?如果你的jquery.validate.js有bug,可以下载本站的修改过bug的版本(而且还扩展了几个校验哟)。支持博主,就点文章右侧的财富箱注册一下吧!