jQuery Validate 初见面-小白筆記-匯編語言學習筆記

jQuery Validate 初见面

2023-09-17 阅读 22 评论 0

摘要：jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。

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>

原文链接：https://hbdhgg.com/1/72549.html

发表评论: