H5前端正则验证插件

最近学习了一个新的关于前端正则验证的插件,‘jQuery.validate.js ’ 要用这个插件 首先得有插件,下载jquery.validate.min.js 和jq文件并引入。

我把它简单的通俗的分为两部分

1.要验证的是谁

2.验证的提示信息

具体格式如下

$("id名").validate({

// 要验证的谁  rules:{

},

//验证提示信息 messages{

}

});

基本的格式就是这样   下边我会用代码具体的说下这个插件。

一般的情况下是用来表单的   我们也就拿表单举例子吧。

我们先写一个表单

<form id="myOform">

//用p标签抱起来我们的label标签

<p>

<label for="user">username:</label>  //用户名
              <input type="text" name="username" id="user"/>

</p>

<p>

<label for="user">username:</label>  //密码
              <input type="text" name="username" id="user"/>

</p>

<p>

<input type="submit" name="submit" id="submit"/>  //提交按钮

</p>

</form>

验证的语法要写在script里

<script>

$(function(){

$("#myOform").validate({

rules:{

username:{     //注意!这个名是input的 name 的名称属性。

required:tred,  //必填

rangelength:[8,13] //字符的长度 最小为8 最大为13

}

},

messages:{

username:{

required:‘此项必填’,   // 默认提醒的是英文 可以改成汉字

rangelength:‘最长为13最短为8‘  //提示信息

}

}

});

});

</script>

当然还有其他的提示信息

这是验证各种信息的的表单  如果有需要就可以使用.

当然 还有很多,这只是最简单的  希望我们一起进步。

时间: 2024-08-02 22:45:59

H5前端正则验证插件的相关文章

了解jQuery Validate.JS后不用再为正则验证头疼

jQuery Validate 是功能丰富的正则验证插件,为客户端提供了强大的验证功能,同时提供了大量的正则选项,满足应用程序各种需求.该插件捆绑了一整套有用的验证方法,同时包括URL验证和电子邮件验证,为客户端带来更加便捷的用户体验. 通过实例来说明一下,更易于理解. 1 //定义验证规则 2 rules:{ 3 userName: {required: true,rangelength:[2,10]}, //true表示必填 最少2个最多10个限制字符 4 email: { required

前端编程提高之旅(十)----表单验证插件与cookie插件

    实际项目开发中与用户交互的常见手法就是採用表单的形式.取得用户注冊.登录等信息.而当用户注冊或登录后又须要记住用户的登录状态.这就涉及到经常使用的两个操作:表单验证与cookie增删查找.     项目开发当然能够手动或用原生代码解决以上两个问题,而最好的实践应该是站在巨人的肩膀上.从合理性猜測角度和不反复造轮子的原则上,都应该对成熟的技术,实行拿来主义,更加高速.高效.稳定的将精力放在项目逻辑实现上.    一.表单验证插件(jQuery Validate)    官方描写叙述:仅仅须

知问前端——验证插件

验证插件(validate.js),是一款验证常规表单数据合法性的插件.使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验. 使用validate.js插件 官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation 最重要的文件是jquery.validate.js,还有两个可选的辅助文件:additional-methods.js(控件class方式)和message_zh.js(提示汉

前端tab切换 和 validatejs表单验证插件

一.tab切换 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style>

jQuery html5Validate基于HTML5表单验证插件

一.前言 前3篇文章实际都是为本文做铺垫的,如果以下棋表示,前三篇是普通走棋,本篇是将军! 目前市面上有不少表单验证插件,看似强大,实在糟糕! 总结下,有以下一些问题: 过多干预包括:改变了表单元素UI, 为表单元素绑定过多事件等 布局等限制包括:需要特定结构的布局,需要特定的类名或者ID 学习成本包括:N多元作者自定义的属性,或者自定义的特定的数据结构 可用性 当JS出现错误的时候而无法正常运作的时候,验证就是聋子的耳朵——摆设,即使在现代浏览器下也是如此. 面向未来的表单验证 验证驱动验证信

jq中的表单验证插件------jquery.validate

今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使用的,使用它是非常方便,只需写校验规则和错误字段即可. 我们常见的校验规则有以下几种: (1)required:true               必输字段(2)email:true                  必须输入正确格式的电子邮件(3)date:true               

L--基于js自制注册页面验证插件

介绍 完全基于javascript的验证插件 js代码 var registerValidate = (function () { var validateObj = { warnInfo:"请按提示输入内容", errorInfo:"您输入的的内容有误,请按提示输入" }; var registerValidate = function () { /*----phone number-------*/ validateObj = { input: document

【锋利的jQuery】表单验证插件踩坑

和前几篇博文提到的一样,由于版本原因,[锋利的jQuery]表单验证插件部分又出现照着敲不出效果的情况. 书中的使用方法: 1. 引入jquery源文件, 2. 引入表单验证插件js文件, 3. 在form中class类名中添加"required","email"等去作为验证时读取的参数. 4. 调用代码: $("#commentform").validate(); 很不幸,报错了.前端有个说法是学新不学旧,这里就不去深究原因,直接提供最新的写法

【jquery】Validform,一款不错的 jquery 表单验证插件

关于 Validform 这是一款很不错的 jquery 表单验证插件,它几乎能够满足任何验证需求,仅仅一行代码就能搞定整站的表单验证. $('form').Validform(); 为什么能如此方便?插件的核心思想就是把所有的验证条件及验证提示信息绑定到每个表单元素,让验证代码在执行时只是核对表单下各元素的值是否跟绑定的验证条件相符,这样你可以随便添加或者去掉任一表单元素而不必修改验证代码,从而使仅用一行代码去完成整站的表单验证的梦想成为现实! 功能简介 可以在 input 上直接绑定正则,可