jquery.validate.js 的 remote 后台验证

时间 2019-11-17

标签 jquery.validate.js jquery validate remote 后台验证栏目 JQuery 繁體版

原文原文链接

以前已经有一篇关于jquery.validate.js验证的文章，还不太理解的能够先看看：jQuery Validate 表单验证(这篇文章只是介绍了一下如何实现前台验证，并无涉及后台验证remote方法)。 javascript

有时候咱们不单单对表单所录入的信息进行验证还须要将录入的值与数据库进行比较，这时咱们就须要借助remote方法来实现。这篇文章就是介绍 jquery.validate.js的后台验证的remote方法，准备工做，前台页面： php

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
form{max-width:800px; margin:0 auto;}
form label{display:inline-block;width:150px; text-align:right;}
fieldset{margin-bottom:25px;}
legend {
    border: 1px solid #77848D;
    font-family: "Arial";
    font-size: 14px;
    margin-left: 15px;
    padding: 5px;
}
em.error{font-weight:normal; color:red;}
</style>
<script src="test/jquery.js" type="text/javascript"></script>
<script src="test/jquery.validate.js" type="text/javascript"></script>
<script src="test/jquery.validate.message_cn.js" type="text/javascript"></script>

</head>
<body>
<form name="test" id="testform" method="get" action="get.php">
	<fieldset>
  	<legend title="用户注册(User Register)">用户注册(User Login)</legend>
    <p>
        <label for="name">用户名：</label>
        <input id="name" name="name" type="text" />
    </p>
    <p>
        <label for="mail">邮箱:</label>
        <input id="mail" name="mail" type="password" />
    </p>
    <p>
        <label for="password">密码：</label>
        <input id="password" name="password" type="password" />
    </p>
    <p>
        <label for="repassword">重复密码：</label>
        <input id="repassword" name="repassword" type="password" />
    </p>
    <p>
        <label for="hash">邀请码：</label>
        <input id="hash" name="hash" type="text" />
    </p>
	<p>
        <label for="sel">选择：</label>
		<select id="sel" name="sel">
			<option value="">请选择</option>
			<option value="1">选择1</option>
			<option value="2">选择2</option>
			<option value="3">选择3</option>
			<option value="4">选择4</option>
		</select>
    </p>
    <p>
        <label for="type">用户类型：</label>
        <span><input  name="type" type="radio" value="1" />类型1</span>
        <span><input  name="type" type="radio" value="2" />类型2</span>
        <span><input  name="type" type="radio" value="3" />类型3</span>
    </p>
    <p>
    	<label for="submit">&nbsp;</label>
    	<input class="submit" type="submit" value="注册"/>
    </p>
    </fieldset>
</form>
</body>
</html>

要实现的效果： css

由图可知咱们要准备三个远程验证的文件(这里只是作到这种效果，就不链接数据库查找数据了，若是要和数据库的数据进行匹配原理是同样的，在这里就不赘述查找数据的方法了，相信程序员们都该掌握数据库的操做才行。在这里咱们直接定义一个变量来进行匹配)： html

1.checkhash.php java

<?php
if($_GET)
{
    $hash = $_GET['hash'];
    if($hash == '123456')
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

2.checksel.php jquery

<?php
if($_GET)
{
    $sel = $_GET['sel'];
    if($sel == 2)
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

3.changeusertype.php 程序员

<?php
if($_GET)
{
    $type = $_GET['type'];
    if($type == 2)
    {
        echo 'true';
    }else{
        echo 'false';
    }
    exit();
}

验证代码：数据库

<script type="text/javascript">
$(function(){
	$("#testform").validate({
		rules : {
        	    name : {
            	        required : true
        	    },
        	    password: {
		        required: true,
		        minlength: 5
		    },
		    repassword: {
		        required: true,
		        minlength: 5,
		        equalTo: "#password"
		    },
		    hash: {
		        required: true,
		        remote: 'checkhash.php'
		    },
		    sel: {
		        remote: 'checksel.php'
		    },
		    type: {
		        remote:{
		            url: "changeusertype.php",
		            type: "get",
		            dataType: 'json',
			        data: {
			            'type': function(){return $('input[name="type"]:checked').val();}
		            }
		    }
	        }
    	},
    	messages : {
        	name : {
            	    required : '必填'
        	},
        	password: {
		    required: '必填',
		    minlength: '最少5个字符'
		},
		repassword: {
		    required: '必填',
		    minlength: '最少5个字符',
		    equalTo: '两次输入的密码不同'
		},
		hash: {
		    required: '必填',
		    remote: '邀请码不正确'
		},
		sel: {
		    remote: '选择不正确'
		},
		type: {
		    remote: '类型不可更改'
		}
    	},
	focusInvalid: true,
    	/*指定错误信息位置*/
	errorPlacement: function (error, element) {
            error.appendTo(element.closest("p"));
	},
	//设置错误信息存放标签
	errorElement: "em",
    	submitHandler: function(form) {
	}
    });
})
</script>

预览效果是这样的： json

这样彷佛已经达到了要求，可是有一个小问题当咱们输入正确的值里点击提交出现了这样的问题(邀请码和选择的验证没有问题，可是单选按钮的出现了问题)： app

这是为何？查阅了一些资料，在验证时会判断以前有没有验证过，当有验证过并有previousValue值时它就会忽略再次提交的值而是取上一次验证结果显示，有不少解决方法都是说更改源码，其它能够不用，咱们在提交表单以前先清空以前一次验证绑定的previousValue值，这样就解决问题了。咱们在验证方法以前加一个清空previousValue值的函数：

function emptyValue()
{
	if($('input[name="type"]').data("previousValue"))
		$('input[name="type"]').data("previousValue").old = null;
	return true;
}

在提交表单以前调用这个方法：

<input class="submit" onclick="emptyValue()" type="submit" value="注册"/>

如今应该是这样的效果了(选择正确的用户类型点击提交应该能够经过验证)：

这个问题是在工做时碰到的，纠结了很久是改源码呢仍是不改呢，最后找到了解决方法，在闲暇的时间整理了一下，如今贴出来以做参考，若是你有更好的方法也能够告诉我哦！