<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery-1.6.1.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.validate.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.metadata.js"></script>
<script>
$().ready(function() {
$("#signupForm").validate();
});
</script>
<form method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input />
</p>
<p>
<label for="email">E-Mail</label>
<input />
</p>
<p>
<label for="password">Password</label>
<input type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input type="password" />
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
使用class="{}"的方式,必须引入包:jquery.metadata.js
可以使用如下的方法,修改提示内容
复制代码 代码如下:
<input />
上面代码表示:如果firstname域不填写任何内容,则提示:请输入内容。那么,如果填写的内容长度小于5的话,提示用户,该如何写呢?请看下面代码:
复制代码 代码如下:
<input />
注意:在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
复制代码 代码如下:
class="{required:true,minlength:5,equalTo:'#password'}"
另外一个方式,使用关键字:meta
例如,将上面示例中的代码改为关键字meta形式,代码如下:
复制代码 代码如下:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery-1.6.1.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.validate.min.js"></script>
<script language="JavaScript" type="text/JavaScript" src="https://www.jb51.net/jquery.metadata.js"></script>
<script>
$().ready(function() {
$("#signupForm").validate({meta: "validate"});
});
</script>
<form method="get" action="">
<p>
<label for="firstname">Firstname</label>
<input />
<p>
<label for="email">E-Mail</label>
<input />
</p>
<p>
<label for="password">Password</label>
<input type="password" />
</p>
<p>
<label for="confirm_password">确认密码</label>
<input type="password" />
</p>
<p>
<input type="submit" value="Submit"/>
</p>
</form>
注意:
规则部分应用完整形式,如下所示:
正确写法:
复制代码 代码如下:
<input />
错误写法:
复制代码 代码如下:
<input />
再有一种方式
复制代码 代码如下: