jquery.validate 验证(支持前台js验证通过,然后ajax后台数据校验)
下载 jquery-validation-1.13.1 demo 包。
看到 jquery-validation-1.13.1\demo\milk\index.html 这个例子 不错,验证成功 打上一个对号。然后看看 后台js 代码 发现
<script src="../../lib/jquery.mockjax.js"></script> 这是什么 呢,原来 这个 用来 模仿 服务端验证的js ,模拟相应报文。如下:
$.mockjax({
url: "emails.action",
response: function(settings) {
var email = settings.data.email,
emails = ["[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]", "[email protected]"];
this.responseText = "true";
if ($.inArray(email, emails) !== -1) {
this.responseText = "false";
}
},
responseTime: 500
});
要验证的 文本框 Id 为 email,所以这里 url 为 "emails.action".(为啥不是email 呢,看看下面: )
var validator = $("#signupform").validate({
rules: {
email: {
required: true,
email: true,
remote: "emails.action"
}
..........
原来 是email 属性上面定义一个remote 才能支持远程服务端验证 。
上面的都是废话了(我不需要模拟服务端,我就是用服务端啊)
然后参考如下:
http://www.cnblogs.com/xiawuyi/archive/2013/04/01/2990224.html 一个 MVC 的案例。
http://jqueryvalidation.org/remote-method/ 官方的例子。
我的例子:
首先 找到 jquery.validate.js 文件 查找 dataType: "json" 然后 注释这行代码(我也不知道为啥它非要支持json,不去默认 text,或者返回数据格式自定义不好吗)
部分代码 如下:
<link href="plug/bootstrap/bootstrap.css" rel="stylesheet" /> 你们可以不用
<script src="js/jquery.min.js"></script>
<script src="plug/bootstrap/dist/js/bootstrap.js"></script> 你们可以不用
<script src="plug/jquery-validation/dist/jquery.validate.js"></script>
<input type="text" runat="server" class="form-control" data-rule-email="true" name="inputEmail" id="inputEmail"
data-msg-email="请输入正确的邮件地址" placeholder="找回密码和注册验证通过的凭据" data-error="sssss" required>
$(document).ready(function () {
var validator = $("#form1").validate({
rules: {
inputEmail: {
remote: {
url: window.location.pathname, type: "post",
data: {
inputEmail: function () {
return $("#inputEmail").val();
}
}
}
}
}
})
});
if (Request.Form["inputEmail"] != null)
{
Response.Write(111); //这里自己 定义 验证方法 就好
Response.End();
}
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。