jquery-validate 详解,解决class重复的方案

本文展示了一个用户注册表单的验证过程,包括表单ID、验证元素、错误提示样式、验证规则、远程验证逻辑以及数据传递方式等关键步骤。详细解释了如何在JavaScript中使用jQuery库实现表单验证,并与后台服务进行交互,确保用户输入的数据符合预设的规则。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

  <script type="text/javascript">
$.ajaxSetup({  
    async : false 
});
$(document).ready(function(){
 
 $("#accountFormId").validate({// #formId为需要进行验证的表单ID
   errorElement :"div",// 使用"div"标签标记错误, 默认:"label"
   errorClass :"validate-error",// 错误提示的css类名"error"
   onsubmit:true,// 是否在提交是验证,默认:true
   onfocusout:false,// 是否在获取焦点时验证,默认:true
   onkeyup :false,// 是否在敲击键盘时验证,默认:true
   onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
   focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
       rules:{
                    accountName: {// 需要进行验证的输入框name
                        required: true,// 验证条件:必填
                        remote:{
        url:"account.do?met=check",     //后台处理程序
        type: "post",               //数据发送方式
        dataType: "html",           //接受数据格式  
        data:{                     //要传递的数据
         userName: function() {       
         return $("#accountName").val();
         }
          },
          dataFilter: function(data, type) {        
                         if (data == "1") 
                             return true; 
                         else 
                             return false; 
                     }                      
                     }
                    },
                    displayName: {// 需要进行验证的输入框name
                        required: true// 验证条件:必填
                    },
                    password: {// 需要进行验证的输入框name
                        required: true,// 验证条件:必填
                        minlength: 5,// 验证条件:最小长度为5
                        maxlength: 10
                    },
                    contactEmail: {// 需要进行验证的输入框name
                        required: true,// 验证条件:必填
                        email: true// 验证条件:格式为email
                    }
                },
                messages:{
                    accountName: {
                        required: "登录名不允许为空!",// 验证未通过的消息
                        remote:$.format("该登录名已存在!")
                    },
                    displayName: {
                        required: "昵称不允许为空!"// 验证未通过的消息
                    },
                    password: {
                        required: "密码不允许为空!",
                        minlength: jQuery.format("密码至少输入 {0} 字符!"),
                        maxlength: jQuery.format("密码至多输入 {0} 字符!")
                    },
                    contactEmail: {
                        required: "email不允许为空",
                        email: "邮件地址格式错误!"
                    }
                }
                })
 });
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值