jQuery Validate 初见面

jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/jquery.validate.js"></script><script>$().ready(function(){var btn = document.getElementById("registerBtn");$("#registerBtn").mouseout(function () {btn.style.backgroundColor='orange';});$(btn).mouseover(function () {btn.style.backgroundColor='blue';});var $registForm = $("#registForm");var $submit = $(":submit");var $contact = $("#contact");var $password = $("#password");var $profile = $("#profile");$registForm.validate({rules: {password: {required: true,pattern: /^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(.{8,20})$/,minlength: 8,maxlength: 20},rePassword:{required: true,equalTo: "#password"},contact:{required: true,pattern:/^[\u4e00-\u9fa5a-z]+$/}},messages:{password: {required: "密码不能为空",pattern:  "密码必须是数字、字母的组合且字母必须包含大小写,且长度为8到20",minlength: "最小长度为8",maxlength: "最大长度为20"},rePassword:{required: "确认密码不能为空",equalTo: "确认密码必须与密码相同"},contact:{required: "姓名不能为空",pattern:  "姓名只能输入汉字或英文字母"}},submitHandler: function(form) {alert("验证通过，提交工单");$.ajax({url: $registForm.attr("action"),type: "POST",data: {contact: $contact.val(),password: $password.val(),profile:  $profile.val()},dataType: "json",cache: false,success: function(message) {if (message.type == "success") {$.message("登录成功！");$submit.prop("disabled", false);} else {$.message(message);$submit.prop("disabled", false);}}});}});});</script>
</head>
<body>
<form id="registForm" action="#" method="post"><table><tr><th>姓名：</th><td><input type="text" name="contact" id="contact"/></td></tr><tr><th>密码：</th><td><input type="password" name="password" id="password"/></td></tr><tr><th> 确认密码：</th><td><input type="password" name="rePassword" id="rePassword"/></td></tr><tr><th> 个人简介：</th><td><textarea style="height: 60px;" id="profile" name="profile"></textarea></td></tr><tr><td colspan="2"><button  style="width:100%;margin-top:20px;background-color: orange" type="submit" id="registerBtn">注册</button><button type="button" onclick="resetForm();" id="resetBtn">重置</button></td></tr></table>
</form>
<script>function resetForm() {$("#registForm")[0].reset();}
</script>
</body>
</html>

jQuery Validate 初见面相关推荐

jquery validate初上手
前言:jquery validate初上手,这个标题不知道是否合适,因为之前已经在dwz中用过validate.但是,毕竟是经过zhanghuihua同学封装过的,对于bootstrap的表单验证,还 ...
jquery validate使用
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bass ...
jquery validate 详解一
jQuery校验官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src=&q ...
jQuery校验 jQuery Validate 表单验证详解
官网地址: http://bassistance.de/jquery-plugins/jquery-plugin-validation 一导入js库 <script src="../j ...
jQuery Validate
2019独角兽企业重金招聘Python工程师标准>>> 贴上链接 http://www.runoob.com/jquery/jquery-plugin-validate.html & ...
jquery.validate不用submit而用js提交的例子
$("#form").validate(); $("#btn).click(function(){if($("#form").valid()){$(& ...
jQuery验证控件jquery.validate.js使用说明+中文API
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明转载 ...
[jQuery]使用jQuery.Validate进行客户端验证（高级篇-下）——不使用微软验证控件的理由...
2019独角兽企业重金招聘Python工程师标准>>> 引用源:http://www.cnblogs.com/kyo-yo/archive/2010/07/06/Use-jQuery ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...

jQuery Validate 初见面

jQuery Validate 初见面相关推荐

最新文章

热门文章