使用jquery-validate进行表单验证

官网：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: "手机号码错误",