表单HTML代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title> <script type="text/javascript" src="/scripts/jquery.js"></script> <script type="text/javascript" src="/scripts/jquery.validate.min.js"></script> </head> <body> <form id="form-signup" action="/" method="post"> <div class="signup-element"> <label>邮箱</label> <input type="text" id="email" class="required"/> </div> <div class="submit_block"> <input type="submit" value="注 册" /> </div> </form> </body> </html>
jQuery validation调用js代码如下:
$(function () { $("#form-signup").validate(); $.validator.messages = { required: "{0}不能为空" }; });
想要的效果是验证时,如果没有输入内容,显示错误信息:邮箱不能为空
也就是在验证时,能够实现自动将$.validator.messages.required中的"{0}"替换为"邮箱"。
$("#email").formValidator({onshow:"请输入邮箱",onfocus:"邮箱至少6个字符,最多100个字符",oncorrect:"恭喜你,你输对了",defaultvalue:"@"}).inputValidator({min:6,max:100,onerror:"你输入的邮箱长度非法,请确认"}).regexValidator({regexp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onerror:"你输入的邮箱格式不正确"});
参考 How to change the way jQuery.validate handles error messages 找到解决方法。
通过 errorPlacement 实现,代码如下:
$(function () { $("#form-signup").validate({ errorPlacement: function (error, element) { $(error).html($(element).prev('label').text() + $(error).html()); error.insertAfter(element); } }); $.validator.messages = { required: "不能为空" }; });
修改后的代码:
errorPlacement: function (error, element) { $(error).html($(element).prev('label').text() + $(error).html()); $(error).removeAttr("generated"); error.insertAfter(element); },
可以直接写在mvc的VM里,这样可以方便的在客户端和服务端都进行验证。
[Required(ErrorMessage = "邮箱不允许为空!")] public string Email { get; set; }
jquery.validate.unobtrusive.js还是很不错的。
这样每个属性都要写
建议使用jquery.validationEngine.js,很不错的一个验证框架,没必要写这么多代码的,要验证的控件上加个css或属性就搞定,而且还美观,
Demo 在这里http://www.position-relative.net/creation/formValidator/
用jquery.validate.unobtrusive似乎更方便,相关博问:ASP.NET MVC 表单验证用什么好