基于Jquery的表单验证插件

标签化表单验证文档

定义标签属性(*是必写属性)

  1. 提示语(placeholder)

placeholder="自定义提示"

  1. Form(id)

id必填

  1. 必填验证(requried)

是否验证:macco-required="true/false/不写" (true为必填项,另两种是可选项)

必填提示:macco-required-tip="自定义提示" (默认提示为*此项为必填项

  1. 数字验证(number)

是否验证:macco-vail-number="true/false/不写" (true为验证,另两种是不验证)
数字提示:macco-number-tip="自定义提示"(默认提示为*数字格式不正确

  1. 最大长度验证(max)

验证条件:macco-vail-max="自定义长度" (例如:macco-vail-max="5"
验证提示:macco-max-tip="自定义提示"(默认提示:*最大长度不能超过n

  1. 最小长度验证(min)

验证条件:macco-vail-min="自定义长度"(例如:macco-vail-min="5")
验证提示:macco-min-tip="自定义提示"(默认提示:*最小长度不能少于n

  1. Email格式验证(email)

是否验证:macco-vail-email="true/false/不写" (true为验证,另两种是不验证)
Email提示:macco-email-tip="自定义提示"( 默认提示:*email格式不正确

  1. url格式验证(url)

是否验证:macco-vail-url="true/false/不写"(true为验证,另两种是不验证)
url提示:macco-url-tip="自定义提示" (默认提示:*url格式不正确

  1. 手机格式验证(phone)

是否验证:macco-vail-phone="true/false/不写"(true为验证,另两种是不验证)
phone提示:macco-phone-tip="自定义提示"(默认提示:*电话号码格式不正确

  1. Ajax验证

是否验证:macco-vail-ajax="true/false/不写"(true为验证,另两种是不验证)
验证提示:macco-ajax-tip="自定义提示"(不填写就没有提示信息)

  1. 确认密码验证(confirmPassword)

是否验证:macco-vail-confirmPassword="true/false/不写"(true为验证,另两种是不验证)
密码提示:macco-confirmPassword-tip="自定义提示"(默认提示:*两次输入密码不一致
验证对象:macco-equalTo="Name"(该Name是指和其对应password的name)

  1. 正则表达式验证

是否增加验证规则:macco-vail-addMethod="true/false/不写"(true为增加验证,另两种是不增加)
增加方法名字:macco-addMethod-name="自定义名字" (例如macco-addMethod-name="china"
是否验证:macco-vail- china="true/false/不写" (true为验证,另两种是不验证)
验证规则:macco-china-regex="自定义规则"(例如macco-china-regex="/^[\u4E00-\u9FFF]+$/"
验证提示:macco-china-tip="自定义提示"(不填写就没有提示信息)

(注:以下是必填项)

  • macco-vail-input="true"(验证该input标签是否可以被验证,以免影响其他input标签)
  • macco-error-label="jquery表达式"(macco-error-label赋值一个表达式,用于存放错误提示的位置,表达式要能找到你所要放错误信息的位置)
  • macco-type="submit"(提交的类型,必填)
  • macco-point-form="#macco-form" (指向form的id,代表提交的表单是指定的form)

多表单验证

演示链接
源码地址

失焦验证

演示链接
源码地址

实时验证

演示链接
源码地址

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery是一个非常流行的JavaScript库,它提供了许多有用的函数和方法,可以方便地操作HTML文档中的元素和事件。在此基础上,开发者可以使用jQuery编写表单验证插件。 以下是一个基于jQuery表单验证插件示例: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>表单验证插件示例</title> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(document).ready(function() { $('#myForm').submit(function() { var name = $('#name').val(); var email = $('#email').val(); var password = $('#password').val(); if (name === '') { alert('请输入姓名!'); return false; } if (email === '') { alert('请输入电子邮件地址!'); return false; } if (!isValidEmail(email)) { alert('请输入有效的电子邮件地址!'); return false; } if (password === '') { alert('请输入密码!'); return false; } return true; }); function isValidEmail(email) { var emailRegex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/; return emailRegex.test(email); } }); </script> </head> <body> <form id="myForm"> <label for="name">姓名:</label> <input type="text" id="name" name="name" /><br /> <label for="email">电子邮件地址:</label> <input type="text" id="email" name="email" /><br /> <label for="password">密码:</label> <input type="password" id="password" name="password" /><br /> <input type="submit" value="提交" /> </form> </body> </html> ``` 在上面的示例中,我们使用了jQuery的`submit()`方法来监听表单提交事件。在表单提交之前,我们检查了每个字段是否有值,并且验证了电子邮件地址的格式。如果有任何一个字段的值不合法,我们就弹出一个警告框,并且返回`false`,阻止表单提交。否则,我们返回`true`,允许表单提交。 当然,这只是一个简单的示例,实际的表单验证插件可能会更加复杂和灵活。但是,这个示例可以帮助你了解如何使用jQuery来编写表单验证插件
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值