jQuery Validate 验证,校验规则写在控件中的具体实例

将校验规则写到控件中


代码如下:

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>

$().ready(function() {
 $("#signupForm").validate();
});

<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

Tips:
使用class="{}"的方式,必须引入包:jquery.metadata.js

可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"

时间: 2014-02-24

ASP.NET jQuery 实例15 通过控件CustomValidator验证CheckBoxList

首先看下界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="

基于jquery实现的服务器验证控件的启用和禁用代码

应用背景 1.用户需要填写表单时.2.页面采用服务器验证控件.3.由用户来选择是否填写更多项,更多项的显示与隐藏用Display控制,如下图. 点击"增加服务内容",显示新增表单项,如下图. 点击"取消增加",隐藏新增表单项. 问题:用户点击下一步时,不对Display=none的新增区域表单进行验证,需要在用户点击"取消增加时",禁用服务器验证控件.反之,启用服务器验证控件. 解决方法 还是使用JQuery来搞定吧,主要是太好用了. 1.输出要

jQuery密码强度验证控件使用详解

本文实例为大家分享了jQuery密码强度验证控件,供大家参考,具体内容如下 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <script type="text/javascript" src="jquery-1.12.1.js"></script>

使用jQuery.Validate进行客户端验证(初级篇) 不使用微软验证控件的理由

主要理由有以下几点: 1.拖控件太麻烦,这个是微软控件的常用方式,你要使用一个控件你得从工具栏中拖到页面里(当然你也可以不拖手写). 2.必须指定验证对象,验证控件与其他textbox,dropdownlist控件不同的是它是验证其他控件的输入是否有效的,所以必须指定所验证的对象. 3.影响整个页面美观,像一些管理系统总是需要进行大量的用户输入验证,所以就可能导致一个页面上有几十个验证控件严重影响了原来页面里的东西,看起来十分不舒服. 4.ajax验证不方便,现在的系统越来越注重客户的用户体验,

fileupload控件 文件类型客户端验证实现代码

无标题页 function CheckFileType() { var objButton=document.getElementById("Button1");//上传按钮 var objFileUpload=document.getElementById('FileUpload1');//FileUpload var objMSG=document.getElementById('msg');//显示提示信息用的DIV var FileName=new String(objFile

验证控件与Button的OnClientClick事件详细解析

一.事件 这是一个长期被我忽略或者是没有发现的问题,问题是这样的: 在一个页面中,当有验证控件的时候,当Button控件触发OnClientClick事件,并且这个事件会返回true和false的时候,验证控件就会失效,不起作用了.具体描述如下: .Net页面如下: 复制代码 代码如下: <form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1"

ASP.NET jQuery 实例16 通过控件CustomValidator验证RadioButtonList

界面代码: 复制代码 代码如下: <form id="form1" runat="server"> <div align="center"> <fieldset style="width: 350px; height: 200px;"> <table border="0" cellpadding="3" cellspacing="3&q

教你用AngularJS框架一行JS代码实现控件验证效果

如上图所示,我们需要实现如下这些验证功能: 控件都是必输控件 都需要控制最大长度 第一次打开页面,控件不能显示为错误状态 输入内容再清空后,必输控件需要显示为错误状态 只有所有输入合法后,发布按钮才能变为可用状态 通过AngularJS,我们可以很轻松的实现这些要求,只需要1行JS代码.UI样式这里采用的是Bootstrap.先上示例代码: HTML. <!DOCTYPE html> <html lang="zh-cn" ng-app="ftitApp&qu

asp.net MaxLengthValidator 最大长度验证控件代码

复制代码 代码如下: /// <summary> /// TextBox的最大长度验证器,如果是varchar,char字段类型,需要此验证 /// </summary> [Description("对MaxLength进行验证")] [ToolboxData("<{0}:MaxLengthValidator runat=server></{0}:MaxLengthValidator>")] public class

js控制.net验证控件是否可用。

function validChange() { // Do nothing if client validation is not active if (typeof (Page_Validators) == "undefined") return; if($("rbBotton_0").checked==false) { ValidatorEnable($('<%=RequiredFieldValidator5.ClientID%>'), false

validator验证控件使用代码

下面是js代码(在绑定对象的时候感觉很不优雅,希望高人能指点一二啊!) 复制代码 代码如下: function validator(obj,option){//验证对象 var self = this; if(!(self instanceof validator)) return new validator(obj,option); self.source={'mobile':'^(13|14|15|18)[0-9]{9}$','postcode':'^\\d{6}$','integer':'

浅析Bootstrap验证控件的使用

废话不多说,本文大概给大家分享两块代码,第一块前端HTML代码,第二块js代码,代码简单易懂,关键代码如下所示: 前端HTML代码 <form id="myForm" method="post" class="form-horizontal" action="/Task/Test"> <div class="modal-body"> <div class="form-

jQuery Validation Engine验证控件调用外部函数验证的方法

在使用jQuery Validation Engine的时候,我们除了使用自带的API之外,还可以自己自定义正则验证.自定义正则验证上一篇已经讲过了,如果想使用自定义函数进行验证怎么办?其实这个控件有个bug,在api中说 也就是在我们需要进行验证的地方加上funcCall[自定义函数名],但是我们会发现总会报错,说找不到你这个函数名.其实它的要求是要添加required进行综合验证,也就是validate[required,funcCall[yorn]],这样它才识别我们的自定义函数.但是我们

ASP.NET中验证控件的使用方法

对于这些常用的控件有效性验证,在Asp.Net中有单独的验证控件可供使用.他们可以满足一般的,诸如非空,范围.比较等的验证,为用户登录页面添加输入数据验证功能和验证码功能. 验证控件: Asp.Net中内置的验证控件有:RequiredFieldValidation.RangeValidation.RegularExpressValidation.CompareValidation.CustomValidation和ValidationSummary等六种.其中用户自定义验证控件,由于并不非常常

ASP.NET中Validation验证控件正则表达式特殊符号的说明

RegularExpressionValidator控件表达式说明: 方括号"[ ]"用与定义可接受的字符.[abc123] 表示控件只能接受 a,b,c,1,2,3 这6个字符: 反集合符号 " ^ "用于定义不可以接受的字符.[^a-h] 表示控件除了 a 到 h 8个字符外,都可以接受: 花括号"{ }"定义必须输入的字符个数.{6}表示只能输入6个字符 : {6,}表示必须输入6个以上,无上限 : {2,6} 表示必须输入2至6个字符:但

使用CustomValidator自定义验证控件检查是否有对ListBox控件选择

在前网页前端处,我们放置ListBox控件,在数据提交前,检查用户是否有对此控件进行选择? Insus.NET的方法是使用Javascript与CustomValidator自定义验证控件来检查. 可以看到最终结果:  你也想参此例子,可以参考下面数据与准备方法,写一个对象,它将用来产生十个天干. HeavenlyStem.cs 复制代码 代码如下: using System; using System.Collections.Generic; using System.Linq; using