jquery-validate的使用（一）

短命女 2022-06-15 03:19 120阅读 0赞

<!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 >jquery-validate表单验证 </ title >

< script src= "jquery-1.11.1.min.js" ></ script >

< script src= "jquery-validation-1.14.0" ></ script >

< script src= "messages\_zh.js" ></ script >

</ head >

< body >

< form  class= "cmxform"  id= "commentForm"  method= "get"  action= "" >

< fieldset >

< legend >输入您的名字，邮箱，URL，备注。 </ legend >

< p >

< label for= "cname" >Name (必需, 最小两个字母) </ label >

< input id= "cname"  name= "name"  minlength= "2"  type= "text"  required >

</ p >

< p >

< label for= "cemail" >E-Mail (必需) </ label >

< input id= "cemail" type= "email" name= "email" required >

</ p >

< p >

< label for= "curl" >URL (可选) </ label >

< input id= "curl"  type= "url"  name= "url" >

</ p >

< p >

< label for= "ccomment" >备注 (必需) </ label >

< textarea id= "ccomment" name= "comment" required ></ textarea >

</ p >

< p >

< input class= "submit" type= "submit" value= "Submit" >

</ p >

</ fieldset >

</ form >

< form  class= "cmxform"  id= "signupForm"  method= "get"  action= "" >

< fieldset >

< legend >验证完整的表单 </ legend >

< p >

< label for= "firstname" >名字 </ label >

< input id= "firstname" name= "firstname" type= "text" >

</ p >

< p >

< label for= "lastname" >姓氏 </ label >

< input id= "lastname" name= "lastname" type= "text" >

</ p >

< p >

< label for= "username" >用户名 </ label >

< input id= "username" name= "username" type= "text" >

</ p >

< p >

< label for= "password" >密码 </ label >

< input id= "password" name= "password" type= "password" >

</ p >

< p >

< label for= "confirm\_password" >验证密码 </ label >

< input id= "confirm\_password" name= "confirm\_password" type= "password" >

</ p >

< p >

< label for= "email" >Email </ label >

< input id= "email"  name= "email"  type= "email" >

</ p >

< p >

< label for= "agree" >请同意我们的声明 </ label >

< input type= "checkbox" class= "checkbox" id= "agree"  name= "agree" >

</ p >

< p >

< label for= "newsletter" >我乐意接收新信息 </ label >

< input type= "checkbox" class= "checkbox" id= "newsletter" name= "newsletter" >

</ p >

< fieldset id= "newsletter\_topics" >

< legend >主题 (至少选择两个) - 注意：如果没有勾选“我乐意接收新信息”以下选项会隐藏，但我们这里作为演示

让它可见 </ legend >

< label for= "topic\_marketflash" >

< input type= "checkbox" id= "topic\_marketflash" value= "marketflash" name= "topic" >Marketflash

</ label >

< label for= "topic\_fuzz" >

< input type= "checkbox" id= "topic\_fuzz" value= "fuzz" name= "topic" >Latest fuzz

</ label >

< label for= "topic\_digester" >

< input type= "checkbox" id= "topic\_digester" value= "digester" name= "topic" >Mailing list digester

</ label >

< label for= "topic" class= "error" >Please select at least two topics you'd like to receive. </ label >

</ fieldset >

< p >

< input class= "submit" type= "submit" value= "提交" >

</ p >

</ fieldset >

</ form >

< script >

$( function()\{

/\*jQuery Validate提供了中文信息提示包，位于下载包的 dist/localization/messages\_zh.js，内容如下：\*/

/\*(function(factory)\{

if(typeof define === 'function' && define.amd ) \{

define(\['jquery','../jquery.validate'\],factory);

\}else\{

factory(jQuery);

\})(function($)\{

$.extend($.validator.messages, \{

required:'这是必填字段',

remote:"请修正此字段",

email:"请输入有效的电子邮箱地址",

date:"请输入有效的日期",

dateISO:"请输入有效的日期(YYYY-MM-DD)",

number:"请输入有效数字"，

digits:"只能输入数字",

creditcard:"请输入有效的信用卡号码",

equalTo:"你的输入不相同",

extension:"请输入有效的后缀",

maxlength:$.validator.format("最多可以输入 \{0\} 个字符"),

minlength:$.validator.format("最少输入 \{0\} 个字符"),

rangelength:$.validator.format("请输入长度在 \{0\} 到 \{1\} 之间的字符串"),

range:$.validator.format("请输入范围在 \{0\} 到 \{1\} 之间的数值"),

max: $.validator.format("请输入不大于 \{0\} 的数值"),

min:$.validator.format("请输入不小于 \{0\} 的数值")

\});

\});\*/

/\*你可以将该本地化信息文件 dist/localization/messages\_zh.js 引入到页面：\*/

/\*<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages\_zh.js">

</script>\*/

// 1.将校验规则写在控件中

$. validator. setDefaults(\{

submitHandler:  function()\{

alert( "提交事件");

\});

$(). ready( function()\{

$( "\#commentForm"). validate();

\});

// 2.将校验规则写在js代码中

$(). raedy( function()\{

$( "\#signupForm"). validate(\{

rules:\{

firstname: 'required'，

lastname: 'required',

username:\{

required: true,

minlength: 2

\},

password:\{

required: true,

minlength: 5

\},

confirm\_password:\{

required: true,

minlength: 5,

equalTo: '\#password'

\},

email:\{

required: true,

email: true

\},

topic:\{

required: '\#newsletter:checked',

minlength: 2

\},

agree: 'required'

\},

messages: \{

firstname: '请输入您的名字',

lastname: '请输入您的姓氏',

username:\{

required: '请输入用户名',

minlength: '用户名必须由两个字母主城'

\},

password: \{

required: "请输入密码",

minlength: "密码长度不能小于 5 个字母"

\},

confirm\_password: \{

required: "请输入密码",

minlength: "密码长度不能小于 5 个字母",

equalTo: "两次密码输入不一致"

\},

email: "请输入一个正确的邮箱",

agree: "请接受我们的声明",

topic: "请选择两个主题"

\})

/\*

required:true 值是必须的。

required：’\#aa:checked' 表达式的值为真，则需要验证。

required：function（）\{\}返回为真，表示需要验证。

后两种常用于，表单中需要同时填或不填的元素。

\*/

// 常用方法及注意问题

// 1、用其他方式替代默认的 SUBMIT

$(). ready( function() \{

$( "\#signupForm"). validate(\{

submitHandler: function( form)\{

alert( "提交事件!");

form. submit();

\});

// 使用 ajax 方式

$( ".selector"). validate(\{

submitHandler:  function( form)

$( form). ajaxSubmit();

\})

// 可以设置 validate 的默认值，写法如下：

$. validator. setDefaults(\{

submitHandler:  function( form) \{  alert( "提交事件!"); form. submit(); \}

\});

// 如果想提交表单, 需要使用 form.submit()，而不要使用 $(form).submit()。

\})

</ script >

</ body >

</ html >

jquery-validate的使用（一）

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Axure中继器的使用（一）

相关（一）psql的使用

相关 Retrofit的使用详解（一）

相关 less的使用介绍（一）

相关 OpenPyXL的使用教程（一）

相关（一）使用 mybatis 的缘由

相关 SSRS 的简单使用（一）

相关 git的基础使用（一）

相关 JQueryValidate添加自定义方法校验密码

相关 Selector类的使用(一)