注册功能，简易的各字段验证方法

我帅我先跑

已于 2022-08-04 19:00:14 修改

阅读量176

点赞数

文章标签： java 前端

于 2022-08-04 15:38:22 首次发布

本文链接：https://blog.csdn.net/weixin_48104862/article/details/126160302

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="loginstyle.css">

</head>
<body>

<form id="myform" method="post" action="register.html">
                    <ul>
                        <li>
                            <label for="nickName">用户名:</label>
                            <input type="text" id="nickName" name="nickName"
                                   v-model="member.nickName"
                                   placeholder="请输入您的用户名" required>
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="pwd">密码:</label>
                            <input type="password" id="pwd" name="pwd"
                                   v-model="member.pwd"
                                   placeholder="请输入6~15位字母、数字还可包含特殊字符">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="cpwd">确认密码:</label>
                            <input type="password" id="cpwd" v-model="cpwd"
                                   name="cpwd" placeholder="请输入确认密码">
                            <span class="error_tip">提示信息</span>
                        </li>
                        <li>
                            <label for="email">邮箱:</label>
                            <input type="email" id="email" v-model="member.email"
                                   name="email" placeholder="请输入有效的邮箱地址"/>
<!--                            <input type="button" id="getCode" onclick="sendCode()" value="获取验证码"/>-->
                            <span class="error_tip yzm_tip">提示信息</span>
                        </li>
<!--                        <li>-->
<!--                            <label for="yzm">验证码:</label>-->
<!--                            <input type="text" id="yzm" name="realName" placeholder="请输入验证码">-->
<!--                            <span class="error_tip">提示信息</span>-->
<!--                        </li>-->
                        <li>
                            <label for="tel">电话号码:</label>
                            <input type="text" id="tel" name="tel" v-model="member.tel"
                                   placeholder="请输入以1开头的11位有效电话号码">
                            <span class="error_tip">提示信息</span>
                        </li>

                        <li class="agreement">
                            <input type="checkbox" id="allow" name="allow" checked>
                            <label for="allow">同意<a href="#">"天天生鲜用户使用协议"</a></label>
                            <span class="error_tip2">提示信息2</span>
                        </li>
                        <li>
                            <input type="button" id="reg" name=""
                                   @click.prevent="reg" onClick="checkRegister()" 
                            

                            value="注 册">     //  在此标签内调用注册方法



                            <span id="errmsg">提示信息3</span>
                        </li>
                    </ul>
                </form>


<script>
   
  

//   document.getElementById("xx")   xx表示的是页面标签的id  标签id不可以重复

  methods : {

    //验证获取所有输入的内容
    reg() {

        if (document.getElementById("i").value.trim().length == 0) {
            alert("账号不能为空");
            return;
        }


        var re = /^1\d{10}$/    //11位手机号的正则表达式
        if (!re.test(document.getElementById("tel").value)) {
            alert("手机号必须为11位数字！")
            return;
        }

        if ((num != document.getElementById("yanz").value)) {
            alert('验证码输入有误！！！');
            return;
        }

        if (document.getElementById("nickName").value.trim().length == 0) {
            alert('名称不能为空！！！');
            return;
        }

        if (document.getElementById("pwd").value.trim().length<6) {
            alert('密码不符合要求');
        }

        if (document.getElementById("cpwd").value != document.getElementById("pwd").value) {
            alert('密码不一致');
            return;
        }


        if (!document.getElementById("allow").checked) {
            alert('没有勾选协议');
            return;
        }

         
      
         调用控制层（controller）的注册方法
         
          例如： 
             axios.post("....").then(res=>{
                
                  ........

             });
        
    }

}

</script>


</body>
</html>

我帅我先跑

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
注册功能，简易的各字段验证方法

注册功能快速完成验证的功能
复制链接

扫一扫