1)jquery validate 远程验证remote,自定义验证
1-1: js
<script src="YYFramework/Public/js/jquery-3.1.1.js"></script>
<script src="YYFramework/Public/js/jquery.validate.min.js"></script>
<script src="YYFramework/Public/js/jquery.form.js"></script>
<script type="text/javascript"> // 手机号码验证
$.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码"); //jquery.validate表单验证
$(document).ready(function(){
//登陆表单验证
$("#registerForm").validate({
rules:{
username:{
required:true,//必填
minlength:3, //最少6个字符
maxlength:32,//最多20个字符
},
password:{
required:true,
minlength:3,
maxlength:32,
},
confirm_password: {
required: true,
minlength: 3,
maxlength:32,
equalTo: "#password"
},
phone_number: {
required: true,
isMobile: true,
remote:{
url:"action.php?c=HLogin&a=phoneNumber",
type:"post",
data: {
phone_number: function(){return $("#number").val()}
}
} }
},
//错误信息提示
messages:{
username:{
required:"必须填写用户名",
minlength:"用户名至少为3个字符",
maxlength:"用户名至多为32个字符", },
password:{
required:"必须填写密码",
minlength:"密码至少为3个字符",
maxlength:"密码至多为32个字符",
},
confirm_password: {
required: "请输入密码",
minlength:"密码至少为3个字符",
maxlength:"密码至多为32个字符",
equalTo: "两次密码输入不一致"
},
phone_number: {
required:"必须填写手机号",
isMobile: "手机号格式不正确",
remote: "手机号码已经存在"
}
}, submitHandler:function(form){
// form.submit();
$(form).ajaxSubmit({
dataType:"json",
success:function( data ){
console.log('register', data);
if( data == -1 ){
alert("注册失败");
}else{
alert("注册成功");
setTimeout("window.location.href='homeLogin.php', 1000");
}
}
}); return false;
} });
}); </script>
$(form).ajaxSubmit 用的是 jquery.form.js 的方法. 自定义手机号验证:
6 // 手机号码验证
7 $.validator.addMethod("isMobile", function(value, element) {
8 var length = value.length;
9 var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;
10 return this.optional(element) || (length == 11 && mobile.test(value));
11 }, "请正确填写您的手机号码");
1-2: html:
<div class="register-container">
<h1>欢迎注册!</h1> <div class="connect">
<p></p>
</div> <form action="action.php?c=HLogin&a=register" method="post" id="registerForm">
<div>
<input type="text" name="username" class="username" placeholder="您的用户名" autocomplete="off"/>
</div>
<div>
<input type="password" name="password" class="password" id="password" placeholder="输入密码" oncontextmenu="return false" onpaste="return false" />
</div>
<div>
<input type="password" name="confirm_password" class="confirm_password" placeholder="再次输入密码" oncontextmenu="return false" onpaste="return false" />
</div>
<div>
<input type="text" name="phone_number" class="phone_number" placeholder="输入手机号码" autocomplete="off" id="number"/>
</div>
<!-- <div>
<input type="email" name="email" class="email" placeholder="输入邮箱地址" oncontextmenu="return false" onpaste="return false" />
</div> --> <button id="submit" type="submit">注 册</button>
</form>
<a href="homeLogin.php">
<button type="button" class="register-tis">已经有账号？</button>
</a> </div>
1-3: 服务器端.
1-3-1: 注册:action="action.php?c=HLogin&a=register"
public function registerAction()
{
$userName = $_REQUEST["username"];
$loginName = $userName;
$password = $_REQUEST["password"];
$iphone = $_REQUEST["phone_number"]; $UserModel = new UserModel();
$UserModel->userName = $userName;
$UserModel->loginName = $loginName;
$UserModel->password = $password;
$UserModel->pic = '';
$UserModel->iphone = $iphone;
$UserModel->lastUpdateTime = time();
echo json_encode($UserModel->insert());
}
1-3-2: 远程验证 手机号是否重复.url:"action.php?c=HLogin&a=phoneNumber",
/**
* [phoneNumberAction 验证手机号码是否重复]
* @return [type] [description]
*/
public function phoneNumberAction()
{
$phone = $_REQUEST["phone_number"]; $UserModel = new UserModel();
$UserModel->getDataRow( " where iphone = $phone "); if ($UserModel->getDB) {
echo json_encode(false);
} else {
echo json_encode(true);
} }
注意 这里返回的是 : json_encode(false) 表示有重复的号码; 必须是json_encode(true) ,是json格式.
2)bootstrapvalidate 远程remote验证的方法
2-1:js
//表单验证
base.userForm = function(){
//验证字段
var fields = {
'userName':{message :'姓名验证失败!',validators:{notEmpty:{message:'姓名不能为空'}}},
'loginName':{
message :'登录名验证失败!',
validators:{
notEmpty:{
message:'登录名不能为空'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'action.php?c=HLogin&a=loginName2',//验证地址
message: '登录名已存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',
data: function(validator) {
return {
loginName: $('#loginName_0').val()
};
} }
}
},
'password':{
message :'登陆密码验证失败!',
validators:{
notEmpty:{
message:'登陆密码不能为空'
},
identical: {
field: 'cpassword',
message: '确认密码与密码不一致'
} }
},
'cpassword':{
message :'确认密码验证失败!',
validators:{
notEmpty:{
message:'确认密码不能为空'
},
identical: {
field: 'password',
message: '确认密码与密码不一致'
} }
},
'iphone':{
message :'手机号验证失败!',
validators:{
notEmpty:{
message:'手机号不能为空'
},
remote: {//ajax验证。server result:{"valid",true or false} 向服务发送当前input name值，获得一个json数据。例表示正确：{"valid",true}
url: 'action.php?c=HLogin&a=phoneNumber2',//验证地址
message: '手机号已存在',//提示消息
delay : 1000,//每输入一个字符，就发ajax请求，服务器压力还是太大，设置2秒发送一次ajax（默认输入一个字符，提交一次，服务器压力太大）
type: 'POST',
data: function(validator) {
return {
phone_number: $('#iphone_0').val()
};
} }
}
}
};
//添加验证
base.validate("#userForm",fields);
}
2-2: 服务器端: url: 'action.php?c=HLogin&a=phoneNumber2',// 注意返回的数据的格式.
public function phoneNumber2Action()
{
$phone = $_REQUEST["phone_number"]; $UserModel = new UserModel();
$UserModel->getDataRow( " where iphone = $phone "); if ($UserModel->getDB) {
// $arr[""]
// echo json_encode(false);
echo '{"valid":false}';
} else {
// echo json_encode(true);
echo '{"valid":true}';
} }
必须是这种格式: {"valid":false}