<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.validate.js"></script>
label.error{color:#ea5200; margin-left:4px; padding:0px 20px;
background:url(images/unchecked.gif) no-repeat 2px 0 }
label.right{margin-left:4px; padding-left:20px; background:
url(images/checked.gif) no-repeat 2px 0}
<form id="myform" action="#" method="post"> <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mytable"> <tr class="table_title"> <td colspan="2">jquery.validation 表单验证</td> </tr> <tr> <td width="22%" align="right">用户名:</td> <td><input type="text" name="user" id="user" class="input required" /> <p>用户名为3-16个字符,可以为数字、字母、下划线以及中文</p></td> </tr> <tr> <td align="right">密码:</td> <td><input type="password" name="pass" id="pass" class="input required" /> <p>最小长度:6 最大长度:16</p> </td> </tr> <tr> <td align="right">确认密码:</td> <td><input type="password" name="repass" class="input required" /></td> </tr> </table> </form>
$(function(){
var validate = $("#myform").validate({
rules:{ //定义验证规则
......
},
messages:{ //定义提示信息
......
}
})
});
rules:{
user:{
required:true,
maxlength:16,
minlength:3
},
......
}
messages:{
user:{
required:"用户名不能为空!",
remote:"该用户名已存在,请换个其他的用户名!"
},
......
}
jQuery.validator.addMethod("isZipCode", function(value, element) {
var zip = /^[0-9]{6}$/;
return this.optional(element) || (zip.test(value));
}, "请正确填写您的邮政编码!");
user:{
remote: {
url: "chk_user.php", //服务端验证程序
type: "post", //提交方式
data: { user: function() {
return encodeURIComponent($("#user").val()); //编码数据
}}
}
},
<?php
$request = urldecode(trim($_POST['user']));
usleep(150000);
$users = array('daimajiayuan.com', 'jeymii', 'Peter', 'daimajiayuan');
$valid = 'true';
foreach($users as $user) {
if( strtolower($user) == $request )
$valid = 'false';
}
echo $valid;
?>
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo ( element.parent() );
else if ( element.is(":checkbox") )
error.appendTo ( element.parent() );
else if ( element.is("input[name=captcha]") )
error.appendTo ( element.parent() );
else
error.insertAfter(element);
}
<input type="reset" value="重 置" />点击“重置”按钮,表单元素将会重置,但是再运行Validation插件后,验证的提示信息并没重置,就是那些提示信息没有消失。感谢Validation提供了重置表单的方法:resetForm()
$("input:reset").click(function(){
validate.resetForm();
});
机械节能产品生产企业官网模板...
大气智能家居家具装修装饰类企业通用网站模板...
礼品公司网站模板
宽屏简约大气婚纱摄影影楼模板...
蓝白WAP手机综合医院类整站源码(独立后台)...苏ICP备2024110244号-2 苏公网安备32050702011978号 增值电信业务经营许可证编号:苏B2-20251499 | Copyright 2018 - 2025 源码网商城 (www.ymwmall.com) 版权所有