jQuery Validation表单验证范例

最新推荐文章于 2022-06-28 10:35:43 发布
最新推荐文章于 2022-06-28 10:35:43 发布
阅读量454 收藏
点赞数 1
分类专栏： jQuery

jQuery Validato表单验证插件，它是基于jQuery类库，实现了js脚本于页面html代码的分离。你可以划分多个校验组，每个组的校验都是互不影响。对一个表单对象，你只需要写一行代码就可以轻松实现无数种（理论上）脚本控制。

jq代码

 代码如下复制代码
/**
 * @author ming
 */
$(document).ready(function(){

/* 设置默认属性 */
$.validator.setDefaults({
submitHandler: function(form) {
form.submit();
}
});

// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);      
}, "只能包括中文字、英文字母、数字和下划线");

// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
 var length = value.length;
 for(var i = 0; i < value.length; i++){
 if(value.charCodeAt(i) > 127){
 length++;
 }
 }
 return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");

// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
 return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");

// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
 var length = value.length;
 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
 return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");

// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
 var tel = /^d{3,4}-?d{7,9}$/; //电话号码格式010-12345678
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");

// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
 var length = value.length;
 var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
 var tel = /^d{3,4}-?d{7,9}$/;
 return this.optional(element) || (tel.test(value) || mobile.test(value));

}, "请正确填写您的联系电话");

// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
 var tel = /^[0-9]{6}$/;
 return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");

//开始验证
$('#submitForm').validate({
 /* 设置验证规则 */
 rules: {
 username: {
 required:true,
 stringCheck:true,
 byteRangeLength:[3,15]
 },
 email:{
 required:true,
 email:true
 },
 phone:{
 required:true,
 isPhone:true
 },
 address:{
 required:true,
 stringCheck:true,
 byteRangeLength:[3,100]
 }
 },

 /* 设置错误信息 */
 messages: {
 username: {
 required: "请填写用户名",
 stringCheck: "用户名只能包括中文字、英文字母、数字和下划线",
 byteRangeLength: "用户名必须在3-15个字符之间(一个中文字算2个字符)"
 },
 email:{
 required: "请输入一个Email地址",
 email: "请输入一个有效的Email地址"
 },
 phone:{
 required: "请输入您的联系电话",
 isPhone: "请输入一个有效的联系电话"
 },
 address:{
 required: "请输入您的联系地址",
 stringCheck: "请正确输入您的联系地址",
 byteRangeLength: "请详实您的联系地址以便于我们联系您"
 }
 },

 /* 设置验证触发事件 */
 focusInvalid: false,
 onkeyup: false,

 /* 设置错误信息提示DOM */
 errorPlacement: function(error, element) {
 error.appendTo( element.parent());
 },

});

});




测试页index.html

 代码如下复制代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=gbk" />
 <title>jQuery验证</title>
 <script src="lib/jquery/jquery-1.3.2.min.js" ></script>
 <script type="text/javascript" src="lib/jquery/jquery.validate.js" mce_src="lib/jquery/jquery.validate.js"></script>
 <script type="text/javascript" src="lib/jquery/messages_cn.js"></script>
 <script type="text/javascript" src="lib/jquery/formValidatorClass.js"></script>
 <style type="text/css">

 * {
 font-family: Verdana;
 font-size: 96%;
 }
 label {
 width: 10em;
 float: left;
 }
 label.error {
 float: none;
 color: red;
 padding-left: .5em;
 vertical-align: top;
 }
 p {
 clear: both;
 }
 .submit {
 margin-left: 12em;
 }
 em {
 font-weight: bold;
 padding-right: 1em;
 vertical-align: top;
 }
</style>
</head>
<body>
<form class="submitForm" id="submitForm" method="get" action="">
<fieldset>
<legend>表单验证</legend>
<p>
<label for="username">用户名</label>
<em>*</em><input id="userName" name="username" size="25" />
</p>
<p>
<label for="email">E-Mail</label>
<em>*</em><input id="email" name="email" size="25" />
</p>
<p>
<label for="phone">联系电话</label>
<em>*</em><input id="phone" name="phone" size="25" value="" />
</p>
<p>
<label for="address">地址</label>
<em>*</em><input id="address" name="address" size="22">
</p>
<input class="submit" type="submit" value="提交"/>
</p>
</fieldset>
</form>
</body>
</html>

 

luyaran
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery中validation表单验证
panda929的博客
04-11 1669
validation使前端验证变得很方便，下面简单介绍下使用方法 validation $(function(){ $("#commentForm").validationEngine(); }); 账户： 密码： jquery.validatio
JQuery：表单验证插件——validation（表单校验示例）
平安学习日记
03-11 274
validation插件 1、导包 先引入jquery.js（validate基于jquery的插件） 引入表单校验插件(jquery.validate.js) dist目录下 引入dist/localization目录下的messages_zh.js (中文简体) 2、为指定表单加入校验 validate需要手动声明对哪个表单进行校验 也就是说需要手动调用 validate() 方法。 3...
学习笔记之$.validate的运用以及form表单提交使用
陈先生的博客
04-01 4782
使用jquery自带的表单验证功能，需要先引入validator.js 和 jquery.js 下面有validator的属性和方法，代码里面我做了详细的注释。 这个版本的是正常的form表单提交的，下一个记录的是ajax的提交 html部分 <form id="testForm" action="http://localhost:8083/hhh" method="POST"&gt...
jquery.validate form 基本使用
liwateryi的专栏
03-31 1123
$(function(){ var validate = $("#myform").validate({ debug: true, //调试模式取消submit的默认提交功能 //errorClass: "label.error", //默认为错误的样式类为：error focu
jQuery Validate 表单验证 应用
简单那么一点点
06-28 384
jquery-validate 表单验证插件使用
学习笔记之$.validate的运用以及form表单提交使用（ajax）
陈先生的博客
04-01 747
使用ajax提交form表单的时候要注意把表单的数据使用 KaTeX parse error: Expected 'EOF', got '#' at position 3: ('#̲testForm').seri….ajax来进行传输数据。 当然，这些通信的正常使用，要基于服务器的通信完整，才能使用，搭建好服务器来可以保持通信，才能使代码走通。 html <form id="test...
jquery validation验证表单插件
10-20
使用jQuery Validation插件进行表单验证的基本步骤是选中要验证的表单元素，然后调用validate()方法进行验证。例如：`$("#form").validate();` 这行代码会为ID为form的表单元素添加验证功能。 3. 验证规则 在jQuery...
jQuery插件Validation表单验证详解
10-18
总的来说，jQuery Validation插件通过简单易用的API，为开发者提供了丰富的表单验证功能，使得在JavaScript中进行表单验证变得更加便捷和高效。通过理解和实践，开发者可以充分利用这个插件来提高其Web应用的质量和...
jquery validation插件表单验证的一个例子
10-29
jQuery Validation 插件是用于在前端进行表单验证的强大工具，它可以帮助开发者轻松地实现对用户输入数据的有效性检查，确保用户在提交表单前填写的信息符合预设的规则。这个插件通常与jQuery库一起使用，以提供更加...
jquery表单验证插件validation使用方法详解
10-20
jQuery Validation 插件是用于在前端进行表单验证的一个强大工具，它简化了对用户输入数据的检查，确保用户在提交表单前填写了必要的信息并遵循特定的格式。本篇文章将详细介绍如何使用jQuery Validation插件，以及...
Java Web Jquery表单验证
07-26
编写基于Jquery的表单验证插件 Java Web Jquery表单验证 jQuery是一个流行的JavaScript库，可用于在网页上进行各种操作，包括表单验证。 1、将基于Jquery的表单验证的调查问卷分为四个部分：FrontPage.html、write....
jQuery Validate 表单验证
lingongheng
04-17 675
jQuery ValidatejQuery Validate插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，且已翻译成其他 37 种语言。使用方法1： 将校验规则写到控件中（这个还是少用）<
前端校验用户输入的手机号或者座机号是否符合格式
一株木樨的博客
08-17 2052
若依框架 前端校验用户输入的手机号或者座机号是否符合格式 效果： 输入的手机号：15878452358324 输入座机号： 012-15845233223 代码： 因为联系电话非必填项，所以在点击提交之前去校验的时候，如果填写了手机号或者座机号则去校验，没有填则新增，编辑同理 function submitHandler() { var phone = $("#phone").val(); var isPhone = /^(((\d{3,4}-)?[0-9]{7,8})|
ruoyi 验证表单
sayyy的专栏
04-20 5486
前言 ruoyi 4.6.0 ruoyi 使用 jQuery Validate插件 ruoyi 使用 jQuery Validate插件实现表单验证功能。参考文档有： https://doc.ruoyi.vip/ruoyi/document/qdsc.html#表单校验 https://doc.ruoyi.vip/ruoyi/document/zjwd.html#jquery-validate https://jqueryvalidation.org/documentation/ ruoyi 验证表
jQuery validate自定义校验规则（过滤特殊字符）
huangbaokang的博客
09-19 1381
<input type="text" class="form-control" name="userName" th:field="*{userName}" placeholder="请输入用户名称"> jQuery.validator.addMethod("checkInput", function(value, element) { var patte...
jquery.validate+jquery.form提交的三种方式
weixin_30699741的博客
06-06 513
概述：本篇主要讨论jquery.validate结合jquery.form实现对表单的验证和提交方案。 方式一：是通过jquery.validate的submitHandler选项，即当表单通过验证时执行回调函数。在这个回调函数中通过jquery.form来提交表单； 方式二：是通过jquery.form的beforeSubmit，即在提交表单前执行的回调函数，这个函数如果返回true，则提交...
weixin260微信平台签到系统的设计与实现springboot.zip
最新发布
08-20
互联网发展至今，无论是其理论还是技术都已经成熟，而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播，搭配信息管理工具可以很好地为人们提供服务。针对高校教师成果信息管理混乱，出错率高，信息安全性差，劳动强度大，费时费力等问题，采用微信平台签到系统可以有效管理，使信息管理能够更加科学和规范。 微信平台签到系统使用Java语言进行编码，使用Mysql创建数据表保存本系统产生的数据。系统可以提供信息显示和相应服务，其管理微信平台签到系统信息，查看微信平台签到系统信息，管理微信平台签到系统。 总之，微信平台签到系统集中管理信息，有着保密性强，效率高，存储空间大，成本低等诸多优点。它可以降低信息管理成本，实现信息管理计算机化。
jQuery Validation Plugin：简化前端表单验证与优势
"jQuery验证插件Validation是一种常用的前端客户端数据验证...总结来说，jQuery Validation插件为前端开发人员提供了一个强大且易用的工具，通过简单的API和灵活的规则设置，能有效提升网站表单验证的效率和用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值