使用jquery-validate进行表单验证

来源：互联网发布：淘宝卖家怎么升级快编辑：程序博客网时间：2024/05/21 09:47

官网：https://jqueryvalidation.org/

文档参考： http://www.runoob.com/jquery/jquery-plugin-validate.html

下载相关的jquery.js jquery.validate.min.js messages_zh.js 放在同一文件夹里。

下例演示了email类型的验证及添加一个mobile类型的过程

html页面

<script src="/js/jquery/jquery.js"></script><script src="/js/jquery/jquery.validate.min.js"></script><script src="/js/jquery/messages_zh.js"></script><script>$.validator.setDefaults({submitHandler: function() {//alert("提交事件!");form.submit();}});$().ready(function() {$("#Form").validate();});</script><form id="Form" method="post" action="/xx/oo"><input id="email" name="email" class="input-text2" placeholder="请在这里输入邮箱" size="20"  style="color: #aaa;" type="email" required/><input id="mobile" name="mobile" class="input-text2"  placeholder="请在这里输入手机号码" size="20"  style="color: #aaa;" type="mobile" required/>

jquery.validate.min.js中可以增加类型判断

mobile: "Please enter a valid mobile number.",[type='mobile'],mobile: {mobile: !0},mobile: function (a, b) {                return this.optional(b) || /^(13[0-9]|14[57]|15[012356789]|17[0678]|18[0-9])\d{8}$/.test(a)            },

messages_zh.js可以修改提醒的文字

mobile: "手机号码错误",

0 0