下载地址： 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);
?>