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="註冊"/>

如今應該是這樣的效果了(選擇正確的用戶類型點擊提交應該能夠經過驗證)：

這個問題是在工做時碰到的，糾結了很久是改源碼呢仍是不改呢，最後找到了解決方法，在閒暇的時間整理了一下，如今貼出來以做參考，若是你有更好的方法也能夠告訴我哦！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。