【jquery】用jquery手写个表单验证插件

最新推荐文章于 2023-08-15 22:21:38 发布
最新推荐文章于 2023-08-15 22:21:38 发布
阅读量210 收藏 1
点赞数
分类专栏： jquery javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yehuozhili/article/details/103249259
版权

背景

  • 这题刷题刷到的，感觉写起来挺有意思。

思路

  • 直接挂到jquery原型上，然后进行调用即可。

代码

  • 我写的这个验证上基本没啥bug了，包括了表单提交和验证后表单按钮的disabled。
  • 我这个各个功能逻辑写的比较分开，如果以后用到有啥问题也方便修改。
  • 就是没写css，css靠个人。
  • 验证写了邮箱，手机号，最大值，最小值，身份证号都是Input标签。
  • 如果需要绑提交按钮的，就传回调函数名字，从window上拿。提交发送请求就自己发挥。
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<script src="jquery-2.0.3.js"></script>
<body>

	<body>
		<form method="post" action="/22"  id="form">
			<div>
				<label for="email">邮箱：</label>
				<input type="text" name="email" id="email" />
			</div>
			<div>
				<label for="idnumber">身份证号码</label>
				<input type="text" name="idnumber" id="idnumber" />
			</div>
			<div>
				<label for="phonenumber">手机号</label>
				<input type="text" name="phonenumber" id=phonenumber />
			</div>
			<div>
				<label for="maxnumber">最大值</label>
				<input type="text" name="maxnumber" id="maxnumber" />
			</div>
			<div>
				<label for="minnumber">最小值</label>
				<input type="text" name="minnumber" id="minnumber" />
			</div>
			<div>
				<input type="submit" value="提交" id="send" />
			</div>
		</form>
	</body>
	<script>
		jQuery.fn.extend({
			validate: function (option) {
				let that = this
				let rqlist = []
				let subm =false
				let self = {
					required: function (context, name,rqlist,subm) {
						let target = context.find(`input[name=${name}]`)[0]
						let that = this
						if (target) {
							$(target).on("blur keyup", function () {
								let val = $.trim(target.value)
								let res = val === '' ? true : false
								let parent = $(target).parent()
								parent.find(".reqmsg").remove()
								if (res) {
									parent.append(
										'<span style="color:red" class="reqmsg">不能为空!&nbsp;</span>'
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else{
									//别的监听事件存在，通过异步调用
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								
								}
							})
						}
					},
					email: function (context, name,rqlist,subm) {
						let target = context.find(`input[name=${name}]`)[0]
						let that = this
						if (target) {
							$(target).on("blur keyup", function () {
								let reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
								let val = target.value
								let parent = $(target).parent()
								parent.find('.error').remove()
								if (!reg.test(val)&&val!=='') {
									parent.append(
										'<span style="color:red" class="error">邮箱有误!&nbsp;</span>'
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								} else{
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								}
							})
						}
					},
					idNumber:function (context, name,rqlist,subm) {
						let target = context.find(`input[name=${name}]`)[0]
						let that = this
						if (target) {
							$(target).on("blur keyup", function () {
								let reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/
								let val = target.value
								let parent = $(target).parent()
								parent.find('.error').remove()
								if (!reg.test(val)&&val!=='') {
									parent.append(
										'<span style="color:red" class="error">身份证号有误!&nbsp;</span>'
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else{
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								}
							})
						}
					},
					phoneNumber: function (context, name,rqlist,subm) {
						let target = context.find(`input[name=${name}]`)[0]
						let that = this
						if (target) {
							$(target).on("blur keyup", function () {
								let reg =/^1(3|4|5|7|8)\d{9}$/
								let val = target.value
								let parent = $(target).parent()
								parent.find('.error').remove()
								if (!reg.test(val)&&val!=='') {
									parent.append(
										'<span style="color:red" class="error">手机号有误!&nbsp;</span>'
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else{
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								}
							})
						}
					},
					maxNumber: function (context,name,max,rqlist,subm) {
						let target = context.find(`input[name=${name}]`)[0]
						let that = this
						if (target) {
							$(target).on("blur keyup", function () {
								let val = target.value
								let reg = /^(\-|\+){0,1}?\d+$/
								let parent = $(target).parent()
								parent.find('.error').remove()
								if (!reg.test(val)&&val!=='') {
									parent.append(
										`<span style="color:red" class="error">必须是数字!&nbsp;</span>`
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else if(val>max){
									parent.append(
										`<span style="color:red" class="error">不能超过${max}!&nbsp;</span>`
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else{
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								}
							})
						}
					},			
					minNumber: function (context,name,min,rqlist,subm) {
						let that = this
						let target = context.find(`input[name=${name}]`)[0]
						if (target) {
							$(target).on("blur keyup", function () {
								let val = target.value
								let reg = /^(\-|\+){0,1}?\d+$/
								let parent = $(target).parent()
								parent.find('.error').remove()
								if (!reg.test(val)&&val!=='') {
									parent.append(
										`<span style="color:red" class="error">必须是数字!&nbsp;</span>`
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else if(val<min){
									parent.append(
										`<span style="color:red" class="error">不能小于${min}!&nbsp;</span>`
									)
									if(subm){
										let sb=context.find(`[type=submit]`)[0]
										$(sb).prop('disabled',true)
									}
								}else{
									setTimeout(() => {
										that._valid(context,rqlist)
									});
								}
							})
						}
					},
					submit:function(context,name,rqlist){
						let target=context.find(`[type=submit]`)[0]
						//有rq先禁用
						if(rqlist){
							$(target).prop('disabled',true)
						}
						this._submit(context,name)
					},
					_valid:function(context,rqlist){
							//查表格选项，查看是否有验证失败的
							let err = context.find('.error')
							let req = context.find('.reqmsg')
							let data = {}
							let sign = false
							let tmp = context.find('input')
							tmp.each((index)=>{
								if($(tmp[index]).attr("type")!=='submit'){
									data[tmp[index].name]=tmp[index].value
								}
							})
							//如果所有value都是空，说明没动
							let num=0
							for(let key in data){
								if(data[key]===''){
									num++
								} 
							}
							if(Object.keys(data).length===num){
								sign=true
							}
							//如果require没验证，说明没动
							let sign2=false
							rqlist.forEach((key)=>{
								if(data[key]===''){
									sign2=true
								}
							})
							let target=context.find(`[type=submit]`)[0]
							if(err.length||req.length||sign||sign2){
								$(target).prop('disabled',true)
							}else{
								$(target).prop('disabled',false)
							}
					},
					_submit:function(context,name){
						let target=context.find(`[type=submit]`)[0]
						if(target){
							target.addEventListener('click',function(e){
								e.preventDefault()
								window[name]()
							})
						}
					}
				}
				Object.keys(option).forEach((name) => {
					option[name].forEach((key) => {
						if(key==='required')rqlist.push(name)
						if(key==='submit')subm=true
					})
				})
				Object.keys(option).forEach((name)=>{
					option[name].forEach((key)=>{
						if(typeof key ==='object'){
							if(key['maxNumber']){
								self['maxNumber'](that,name,key['maxNumber'],rqlist,subm)
							}
							if(key['minNumber']){
								self['minNumber'](that,name,key['minNumber'],rqlist,subm)
							}
						}else{
							self[key](that, name,rqlist,subm)
						}
					})
				})
			}
		})
		function xxx(){
			console.log('xxxx');
		}
		$("#form").validate({
			//name/fn  //valdate
			email: ["required", "email"],
			idnumber: ["idNumber","required"],
			phonenumber:["phoneNumber"],
			maxnumber:[{"maxNumber":20}],
			minnumber:[{"minNumber":-10}],
			xxx:["submit"]
		})

	</script>

</body>

</html>
业火之理
关注
专栏目录
jquery实现手写输入签名
12-26
jquery实现手写输入签名，不需要任何硬件支持。 采用canvas标签处理签名，可以生成 PNG格式、SVG格式的签名图片，并把图片保存成字符串，根据字符串可以回显到页面。
jQuery插件 -- 表单验证插件jquery.validate.js
热门推荐
Channing
07-05 9万+
最常使用JavaScript的场合就是表单的验证，而jQuery作为一个优秀的JavaScript库，也提供了一个优秀的表单验证插件----Validation。Validation是历史最悠久的jQuery插件之一，经过了全球范围内不同项目的验证，并得到了许多Web开发者的好评。作为一个标准的验证方法库，Validation拥有如下特点： 1.内置验证规则： 拥有必填、数字、Email、URL
基于jQuery的表单验证插件：jValidate
weixin_34275734的博客
12-11 166
table td {padding: 5px; border: 1px dotted #A1A1A1} 网上基于jQuery的表单验证插件已有很多，但是这个轮子我还是继续做一个，因为这个表单验证插件是从我以前的个人JS框架移值过来的（我已慢慢投入jQuery的怀抱），并且它的验证规则书写方式也许会让你眼前一亮。   网上的各类表单验证插件的验证规则都是写在脚本里的，但我的插件...
基于Jquery的表单验证插件
mandy的博客
04-04 416
标签化表单验证文档 定义标签属性（*是必写属性） 提示语（placeholder） placeholder="自定义提示" Form（id） id必填 必填验证（requried） 是否验证：macco-required="true/false/不写" （true为必填项，另两种是可选项） 必填提示：macco-required...
自己编写jQuery插件之表单验证
weixin_30894583的博客
12-03 255
自己编写jQuery插件之表单验证 吐个嘈先：最近状态不咋滴，真是什么都不想干，不想上班，做什么都没动力，觉得没意思。不想这样，不想这样，快让这种情绪消失吧，忽忽.... 表单验证在项目中用的还是比较多的，公司当前正在做的项目就要用到，故此写了此插件，先给大家看下在项目中应用的效果图吧： 直接上插件实现代码了，围绕代码进行讲解比较容易点： /* 描述：基于jquery的...
分享纯手写漂亮的表单验证
09-03
在本文中，我们将探讨如何实现一个纯手工编写的、具有美观样式的表单验证功能，主要涉及JavaScript（JS）和jQuery。表单验证是确保用户输入数据有效性和完整性的关键步骤，尤其对于网页应用程序而言。以下是一些核心...
jQuery手写签名插件jSignature
11-14
1. **jQuery插件**：jSignature是基于jQuery构建的一个插件，它利用jQuery的事件处理和DOM操作能力，简化了在网页上实现签名功能的复杂度。 2. **手写签名**：jSignature允许用户使用鼠标或手指在指定区域内绘制签名...
jquery+html5 手写签名横屏
11-04
在移动设备上实现手写签名功能，是一种常见且实用的需求，尤其在电子文档签署、在线表单填写等场景中。本项目使用了jQuery、HTML5和CSS3技术，结合横屏模式，创建了一个完整的手动签名解决方案，具备完美的回显功能...
jQuery手写签名在线生成器特效代码
03-20
在使用jQuery手写签名在线生成器时，用户可以通过鼠标或触摸设备在画布上绘制签名。当签名完成后，可以利用jSignature提供的方法提取签名数据。例如，`getData()`函数可以获取签名的多种格式数据： - `native`格式...
jQuery写字板插件
12-11
今天我们将深入探讨一款基于jQuery的创新插件——jSignature，它是一款专为实现写字板功能而设计的工具，尤其适用于需要用户手写签名的场景，如电子合同、在线表单等。jSignature利用HTML5的canvas元素，提供了跨...
jquery 表单验证插件
Gorden的博客
06-07 2352
jquery表单校验
没事练手写了一个jQuery表格光棒插件
weixin_33905756的博客
01-07 110
2019独角兽企业重金招聘Python工程师标准>>> ...
表单验证插件jquery-validation以及案例
最新发布
伟庭师兄的博客
08-15 311
确认密码
jQuery-Validate验证插件的使用步骤详解
武哥聊编程
05-25 8万+
我们知道，用户在注册的时候，会有个表单页面，然后有些选项是必填的，有些要填的内容是有规范的，这些都要在用户提交之前进行验证才行，如果不符合要求，需要在右边显示一个友好的提示，让用户修改。 　　记得以前在学习Servlet的时候，实现一个简单的用户注册功能的验证是在后台做的，有些用了正则表达式，有些没用，但是都比较简单。流程是这样的，前台提交表单数据后，servlet获取数据
jQuery插件及表单验证
qq_64001795的博客
03-23 1796
一、自定义插件 前提：引入jquery-3.3.1.js <script src="js/jquery-3.3.1.js" type="text/javascript"></script> 1、$.extend(对象1，对象2) 对象1继承对象2 /*自定义插件*/ $(function(){ //$extend(对象1,对象2) 对象1继承对象2 //定义一个人类对象,属性;name sex var person={"name":...
jQuery插件&表单验证插件案例
qq_63492318的博客
03-22 1422
目录 1.自定义插件； 2.第三方插件； 3.表单验证插件的案例； 一、自定义插件 好，我们今天来看看在jQuery里面然后去自定义一个插件，以及后面Leaf用一个案例来带大家看看如何运用别人写好了的插件，也就是第三方插件： 1.1$.extend() 【作用一】实现对象继承 接下来我们就用一个案例来诠释这一作用点： 案例1：两个对象的继承； //首先定义两个对象 var s1 = {}; var s2 = {"name":"邓正威","sex":"男"}; //继承前 consol.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

业火之理

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值