下載地址： http://validform.club/download.html
1.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="Validform_v5.3.2/Validform_v5.3.2/demo/css/style.css" type="text/css" />
</head>
<body>
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="Validform_v5.3.2/Validform_v5.3.2_min.js"></script>
<form class="demoform" action="2.php">
<div style="margin: 0 auto; width:500px;height:500px;border:5px solid red;">
<div style="margin-top:50px"> <!-- ignore="ignore" 填寫啦就驗證，沒填就不驗證 -->
<label>
賬號
<input type="text" value="" name="name" ajaxurl="1.php" ignore="ignore" datatype="email|mobile" sucmsg="賬號驗證成功" nullmsg="賬號不能爲空" errormsg="賬號至少5個字符,最多16個字符！" />
<span class="Validform_checktip"></span> <!-- sucmsg 驗證成功提示信息 -->
<label/> <!-- nullmsg 爲空提示信息 -->
<div/> <!-- errormsg 驗證錯誤提示信息 -->
<div style="margin-top:50px">
<label>
電話
<input type="tel" value="" name="tel" datatype="tel" nullmsg="電話不能爲空" errormsg="電話錯誤！" />
<span class="Validform_checktip"></span>
<label/>
<div/>
<div style="margin-top:50px">
<label>
密碼
<input type="text" value="" name="password" datatype="s5-16" nullmsg="密碼不能爲空" errormsg="密碼至少5個字符,最多16個字符！" />
<span class="Validform_checktip"></span>
<label/>
<div/>
<div style="margin-top:50px">
<label>
確認密碼 <!-- recheck="password" 和password 密碼輸入框對比 -->
<input type="text" value="" name="qr_pwd" recheck="password" datatype="s5-16" nullmsg="確認密碼不能爲空" errormsg="兩次密碼不一致"/>
<span class="Validform_checktip"></span> <!-- class="Validform_checktip" 用來顯示錯誤信息的-->
<label/>
<div/>
<div style="margin-top:50px">
<label>
郵箱
<input type="text" value="" name="email" datatype="email" nullmsg="郵箱不能爲空" errormsg="郵箱不合法！" />
<span class="Validform_checktip"></span>
<label/>
<div/>
<div style="margin-top:50px">
<label>
網址
<input type="text" value="" name="url" datatype="url" nullmsg="網址不能爲空" errormsg="網址不合法！" />
<span class="Validform_checktip"></span>
<label/>
<div/>
<label>
<input type="submit" value="提交"/>
<label/>
<div>
</form>
<script>
// * 所有字符 s 字符串 n 整型 e 郵箱 m 手機號驗證 url 網址
$(".demoform").Validform({
tiptype:4, // 1 彈窗
showAllError:true,//當提交表單時，展示所有錯誤·
ajaxPost:true, // 異步表單數據提交
datatype:{
mobile:/^1[3|5|7|8]\d{9}$/, //自定義正則
email:/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/,
tel:function(data){
var reg = /^1[3|5|7|8]\d{9}$/;
if(reg.test(data)){
//$.post(); 向數據庫發送請求，查看手機號是否被佔用
return true;
}else{
return false;
}
}
},
//異步請求的回調函數，將返回的數據放在C中
callback:function(c){
console.log(c);
}
});
</script>
</body>
</html>
1.php
<?php
//規定返回json數據
// info 提示信息
// status ： Y 驗證通過 n 驗證不過通
$a = [ 'info'=>'手機號已被佔用','status'=>'n','data'=>['key'=>$_POST['name'],'value'=>$_POST['param']]];
echo json_encode($a);
?>
2.php
<?php
$a = ['info'=>'ok','status'=>'y'];
echo json_encode( $_POST);
?>