jQuery中的异步校验

前言

web开发中经常遇到表单校验,其中最多的问题是唯一性校验。那么如何实现表单元素的异步校验?各种前端框架都有自己的实现方式。这里介绍一种基于jQuery的异步后台校验。

jquery.validation可谓是个强大的表单校验插件,当然也完美支持异步验证。可以用来实现唯一性校验,方便、快捷

引入文件jquery和jquery validation插件

$(function() {
    $("form").validate({
	submitHandler : function(form) {// 必须写在验证前面,否则无法ajax提交
	    ly.ajaxSubmit(form, {// 验证新增是否成功
	        type : "post",
	        dataType : "json",//ajaxSubmi带有文件上传的。不需要设置json
	        success : function(data) {
		    if (data == "success") {
		        layer.confirm('新增成功!是否关闭窗口?', function(index) {
		            parent.grid.loadData();
                            parent.layer.close(parent.pageii);
                            return false;
		        });
		        $("#form")[0].reset();
		    } else {
		        layer.msg('新增失败!', 3);
		    }
                }
          });
        },
    rules : {			
        "storeInfoFormMap.org_id" : {
	     required:true
	},
	"storeInfoFormMap.store_number" : {
	    required : true,
	    remote : { // 异步验证是否存在
	        type : "POST", //提交方式
	        url : "isExist.shtml", // 后台对应url
	        data : { // 设置请求参数
                    storeNumber : function() {							
		        return $("#store_number").val();
                    }
                }
            }
        },
			
     messages : {
         "storeInfoFormMap.org_id" : {
	      required : "请选择所属组织"
	  },
         "storeInfoFormMap.store_number" : {
	     required : "请输入门店编号",
	     remote : "门店编号已存在"  // 返回false时的提示信息
        }
    }
}



  • 2
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基于AJAX实现的用户注册信息异步校验的示例代码: HTML代码: ``` <form id="register-form"> <label for="username">用户名:</label> <input type="text" id="username" name="username"> <span id="username-tips"></span><br> <label for="email">电子邮箱:</label> <input type="email" id="email" name="email"> <span id="email-tips"></span><br> <label for="password">密码:</label> <input type="password" id="password" name="password"><br> <label for="confirm-password">确认密码:</label> <input type="password" id="confirm-password" name="confirm-password"> <span id="password-tips"></span><br> <button type="submit">注册</button> </form> ``` JavaScript代码: ``` $(document).ready(function() { // 防止表单默认提交 $('#register-form').submit(function(event) { event.preventDefault(); }); // 用户名异步校验 $('#username').blur(function() { var username = $('#username').val(); $.ajax({ url: '/check-username', type: 'POST', data: {username: username}, success: function(data) { if (data.status === 'success') { $('#username-tips').text(''); } else { $('#username-tips').text(data.message); } } }); }); // 电子邮箱异步校验 $('#email').blur(function() { var email = $('#email').val(); $.ajax({ url: '/check-email', type: 'POST', data: {email: email}, success: function(data) { if (data.status === 'success') { $('#email-tips').text(''); } else { $('#email-tips').text(data.message); } } }); }); // 密码异步校验 $('#password').blur(function() { var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (password !== confirmPassword) { $('#password-tips').text('两次密码不一致'); return; } $('#password-tips').text(''); }); // 提交表单 $('button[type="submit"]').click(function() { var username = $('#username').val(); var email = $('#email').val(); var password = $('#password').val(); var confirmPassword = $('#confirm-password').val(); if (!username || !email || !password || password !== confirmPassword) { alert('请正确填写表单'); return; } $.ajax({ url: '/register', type: 'POST', data: $('#register-form').serialize(), success: function(data) { if (data.status === 'success') { alert('注册成功'); } else { alert(data.message); } } }); }); }); ``` 以上代码,通过使用jQuery的$.ajax方法,实现了异步校验用户名、电子邮箱、密码等信息,并在前端页面上实时反馈校验结果。在提交表单时,再次校验表单数据的合法性,如果表单数据无误,则使用AJAX提交表单数据给后端服务器进行注册处理。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值