目录
§00 Demo:
§01 实时验证用户名唯一性:
§02 两次输入密码比对功能:
§03 密码强度功能:
§03tipSweep:
§04 ajaxPost:
§00 Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script src="validfrom.js"></script>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<form action="POST"id="form">
输入用户名:<input type="text" name="username" datatype="s6-12">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$('#form').Validform();
</script>
</body>
</html>
demo:
用户名处可以使邮箱|用户名|手机号:将多种验证规则 或|起来即可
通过datatype的方式可以自定义验证规则
<body>
<form action="POST"id="form">
输入用户名:<input type="text" name="username" datatype="s6-12|m|e" nullmsg="用户名不能为空" errormsg="输入格式错误" placeholder="邮箱|手机号|用户名">
请输入网址:<input type="text" datatype="url">
请输入邮箱:<input type="email" datatype="e">
请输入手机号: <input type="text" datatype="m|mobile" errormsg="手机号不正确">
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$('#form').Validform({
"datatype":{"mobile": /^1[3|4|5|6|7|8|9]\d{9}$/}
});
</script>
建议修改为4最好,并在每个input框上添加:
<span class="Validform_checktip"></span>
注意:将input标签和对应的span标签放在同一个div下,因为tiptype默认是在input父元素下寻找class="Validform_checktip"的元素来显示信息。
通过在input上添加sucmsg可以修改通过验证时显示的信息
Dome:
<form action="POST"id="form">
<div>
输入用户名:<input type="text" name="username" datatype="s6-12|m|e" nullmsg="用户名不能为空" errormsg="输入格式错误" placeholder="邮箱|手机号|用户名">
<span class="Validform_checktip"></span>
</div>
<div>
请输入网址:<input type="text" datatype="url">
<span class="Validform_checktip"></span>
</div>
<div>
请输入邮箱:<input type="email" datatype="e">
<span class="Validform_checktip"></span>
</div>
<div>
请输入手机号: <input type="text" datatype="m|mobile" errormsg="手机号不正确">
<span class="Validform_checktip"></span>
</div>
<input type="submit" value="提交">
</form>
<script type="text/javascript">
$('#form').Validform({
"datatype":{"mobile": /^1[3|4|5|6|7|8|9]\d{9}$/},
"tiptype":4
});
</script>
§01 实时验证用户名唯一性:
(1)在input框添加ajaxurl属性:在属性中指定ajax请求发给后端的那个文件
输入用户名:<input type="text" name="username" datatype="s6-12|m|e" nullmsg="用户名不能为空" sucmsg="合法输入" errormsg="输入格式错误" placeholder="邮箱|手机号|用户名" ajaxurl="check.php">
(2)在浏览器网络中可以查看post请求的参数信息,注意该插件会修改input表单的post请求字段名:
表单数据的字段名被修改为param,而不是username
(3)后端接受界面:省略从数据库查询的信息
<?php
$mobile=$_POST['param'];
//省略了从数据库查找信息
if($mobile=='18030100017'){
//已经存在不能注册
$arr = ["info"=>"电话号码已经存在,换一个","status"=>'n'];
}else{
$arr = ["info"=>"可以注册该电话号码","status"=>"y"];
}
echo json_encode($arr);
总结:前端效验逻辑:
首先验证input的datatype,如果验证通过,才向后端发送ajax post请求,来让后端验证是否已经注册过。
§02 两次输入密码比对功能:
(1)给第一次输入密码增加name属性
(2)第二次输入密码增加recheck属性,该属性值等于第一次输入密码的name属性值
(3)两次输入密码必须要有一样的datatype验证
<div>
请输入密码: <input type="password" name="password" datatype="s6-16">
<span class="Validform_checktip"></span>
</div>
<div>
再次输入密码: <input type="password" recheck="password" datatype="s6-16">
<span class="Validform_checktip"></span>
</div>
§03 密码强度功能:
(1)首先找到插件所在的文件夹,然后将文件夹移动到项目目录下:
(2)引入
<script src="passwordStrength/passwordStrength-min.js"></script>
<link rel="stylesheet" href="css/demo.css">
(3)添加plugin属性,和div密码强度:
<div>
请输入密码: <input type="password" plugin="passwordStrength" name="password" datatype="s6-16">
<span class="Validform_checktip"></span>
<div class="passwordStrength">密码强度: <span class="bgStrength">弱</span><span class="bgStrength">中</span><span class="last bgStrength">强</span></div>
</div>
效果如下:
§03tipSweep:
(1)tipSweep不建议设置为true
true:只有点击登录的时候才会进行前端效验,并且错误是一条一条逐条显示,伪造一种后端效验的假象。如果想一次性显示出所有效验不通过的错误,可以修改showAllError为true
false:输入框失去焦点就会进行前端效验,用户体验好
<script type="text/javascript">
$('#form').Validform({
"datatype":{"mobile": /^1[3|4|5|6|7|8|9]\d{9}$/},
"tiptype":4,
"tipSweep":true,
"showAllError":true
});
</script>
§04 ajaxPost:
(1)前端配置:
当ajaxPost设置为true的时候,表单会以post ajax的方式提交,即只提交表单,不进行挑战,提交给form action配置页面
callback中定义的函数能够接受后端响应返回的数据
<script type="text/javascript">
$('#form').Validform({
"datatype":{"mobile": /^1[3|4|5|6|7|8|9]\d{9}$/},
"tiptype":4,
"ajaxPost":true,
callback:function(res){
console.log(res);
if(res.status=='y'){
alert(res.info);
location.href="http://www.baidu.com";//js跳转
}else{
alert(res.info);
}
}
});
(2)后端配置:
<?php
$username=$_POST['username'];
$password=$_POST['password'];
if($username="18030100018" && $password=="123456"){
// 登录成功
$arr = ["info"=>"登录成功","status"=>"y"];
}else{
// 登录失败
$arr = ["info"=>"登录失败","status"=>"n"];
}
echo json_encode($arr,JSON_UNESCAPED_UNICODE);
?>
(3)为了防止表单重复提交可以给postonce加上true