jQueryDay06：表单前端效验 validate插件

最新推荐文章于 2023-08-15 22:21:38 发布

'"<>{{7*7}}

最新推荐文章于 2023-08-15 22:21:38 发布

阅读量179

点赞数

分类专栏： # jQuery

本文链接：https://blog.csdn.net/weixin_43415644/article/details/104684789

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

§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

'"<>{{7*7}}

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQueryDay06：表单前端效验 validate插件

0x00 validate:Demo:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> ...
复制链接

扫一扫