简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

JavaScript中如何实现注册表单的校验实例分析（图）

黄舟
发布： 2017-07-24 10:22:15
原创
1705 人浏览过

说明：在点击提交时进行表单校验，具体要求如下：

1）用户名为3~16个字符，且不能包含”@”和”#”字符；

2）密码和校验密码必须一致，且长度在8个字符到16个字符；

3）兴趣爱好至少选择一项；

4）政治面貌必须为党员；

5) 所有输入符合要求后提示“注册成功”。

HTML代码为：在（register.html中）


<!DOCTYPE html><html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <!--<meta charset="UTF-8">-->
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/myStyle.css">
    <title>用户注册</title></head><body><p class="container">

    <form class="form-horizontal"  role="form">
        <p class="form-group">
        <p class="col-sm-6" >
            <legend class="title" >用户注册信息</legend>
        </p>
        </p>

        <p class="form-group">
            <label for="user-name" class="col-sm-2 control-label">用户名：</label>
            <p class="col-sm-3">
                <input type="text" class="form-control" id="user-name" onblur="checkUserName()"
                       placeholder="请输入用户名"/>
            </p>
            <p class="col-sm-2">
                <span id="nameInfo"></span>
            </p>
        </p>
        <p class="form-group">
            <label for="password" class="col-sm-2 control-label">密码：</label>
            <p class="col-sm-3">
                <input type="password" class="form-control" id="password"  onblur="checkRepassword()"
                       placeholder="请输入密码"/>
            </p>
            <p class="col-sm-2">
                <span id="passwordInfo"></span>
            </p>

        </p>
        <p class="form-group">
            <label for="repassword" class="col-sm-2 control-label">校验密码：</label>
            <p class="col-sm-3">
                <input type="password" class="form-control" id="repassword" onblur="checkRepassword()"
                       placeholder="请输入校验密码">
            </p>
            <p class="col-sm-2">
                <span id="repasswordInfo"></span>
            </p>
        </p>
        <p class="form-group">
            <label  for="nativeplace" class="col-sm-2 control-label">籍贯：</label>
            <p class="col-sm-2">
                <select id="nativeplace">
                    <option value="zhejiang">浙江</option>
                    <option value="fujian">福建</option>
                    <option value="anhui">安徽</option>
                    <option value="sichuan">四川</option>
                </select>
            </p>

        </p>
        <p class="form-group">
            <label class="col-sm-2 control-label">兴趣爱好：</label>
            <p class="col-sm-6" >
                <p onblur="checkHobby()">
                <!--通过将 .checkbox-inline 或 . 类应用到一系列的多选框或单选框空间上，可以使这些控件排列在一行-->
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox1" name="hobby" value="basketball">篮球                </label>
                <label class="checkbox-inline">
                  <input type="checkbox" id="inlineCheckbox2" name="hobby" value="soccer">足球                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" id="inlineCheckbox3" name="hobby"  value="writing" checked="checked">书法                </label>
                <label class="checkbox-inline">
                   <input type="checkbox" id="inlineCheckbox4"  name="hobby" value="music">音乐                </label>
                <br/>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox5" name="hobby" value="painting">绘画                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox6" name="hobby" value="free-combat">散打                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox7" name="hobby" value="yoga" >瑜伽                </label>
                <label class="checkbox-inline">
                    <input type="checkbox" id="inlineCheckbox8" name="hobby" value="other">其他                </label>
                <span id="hobbyInfo"></span>
                    </p>
            </p>
       </p>
        <p class="form-group" onblur="checkStatus()">
            <label  class="col-sm-2 control-label">政治面貌：</label>
            <p class="col-sm-4">
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="党员" checked="checked">党员                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="团员" checked="" >团员                </label>
                <label class="radio-inline">
                    <input type="radio" name="inlineRadioOptions" value="群众" checked="">群众                </label>
            </p>
        </p>

        <p class="form-group">
            <p class="col-sm-offset-2 col-sm-10">
                <button type="submit" id="submit" class="btn btn-success" onclick="validateForm()">提交</button>
                <button type="submit" class="btn btn-warning">重置</button>
                <br/>
                <br/>
                <label><a href="#">注册帮助信息请点击这里</a></label>
            </p>
        </p>
        </form>
        </p>
        <script type="text/javascript" src="../js/jquery-2.1.4.min.js">
        </script>
        <script type="text/javascript" src="../js/bootstrap.min.js">
        </script>
        <script type="text/javascript" src="../js/register.js">
        </script>
        </body>
        </html>
登录后复制

CSS代码为：（在myStyle.css中）


form{
  background-color: #fafdec;

}legend{
   position: relative;
    text-align: center;
    height: 50px;
    padding-top: 10px;
    padding-bottom: 10px;
    margin-bottom: 2px;
    background-color: #e9e9e9;
    font-family: Consolas;
    font-size: 1.5em;
}label{
    align-content: center;
    text-align: center;
    font-size: 1.1em;
}button{
    margin-right: 18px;
}.text{
    width: 500px;
    height: 100px;
}.col-sm-2 span{
    color:red;
}
登录后复制

JavaScript代码为：（封装在register.js文件中）


/* Created by Microsoft on 2016/7/30.*/$(document).ready(function () {   
function validateForm(){     
if(checkUserName()&&checkPassword()&&checkRepassword()&&checkHobby()&&checkStatus()){
         alert("恭喜您！注册成功！");
     }
}
});//验证用户名（为3~16个字符，且不能包含”@”和”#”字符）function checkUserName(){    
var name=document.getElementById("user-name").value.trim();    
var nameRegex=/^[^@#]{3,16}$/;    
if(!nameRegex.test(name)){
        document.getElementById("nameInfo").innerHTML="用户名为3~16个字符，且不能包含”@”和”#”字符";
    }else{
        document.getElementById("nameInfo").innerHTML="";        
        return true;
    }

}//验证密码（长度在8个字符到16个字符）function checkPassword(){    
var password=document.getElementById("password").value.trim();    
//var password=$("#password").value;
    $("#passwordInfo").innerHTML="";    //密码长度在8个字符到16个字符，由字母、数字和".""-""_""@""#""$"组成
    //var passwordRegex=/^[0-9A-Za-z.\-\_\@\#\$]{8,16}$/;
    //密码长度在8个字符到16个字符，由字母、数字和"_"组成
    var passwordRegex=/^[0-9A-Za-z_]\w{7,15}$/;    
    if(!passwordRegex.test(password)){
        document.getElementById("passwordInfo").innerHTML="密码长度必须在8个字符到16个字符之间";
    }else{
        document.getElementById("passwordInfo").innerHTML="";
    }
}//验证校验密码（和上面密码必须一致）function checkRepassword(){    
var repassword=document.getElementById("repassword").value.trim();    
//校验密码和上面密码必须一致
    if(repassword!==password){
        document.getElementById("repasswordInfo").innerHTML="两次输入的密码不一致";
    }else if(repassword==password){
        document.getElementById("repasswordInfo").innerHTML="";
    }
}//验证兴趣爱好（至少选择一项）即，多选框非空function checkHobby(){    
var textbox=document.getElementsByName("hobby");
    $(&#39;input[type=checkbox]&#39;).click(function(){        
    if($("input[name=&#39;hobby&#39;]:checked").length!=0 ) {            
    return true;
        }
    });
}//验证政治面貌（必须为党员）function checkStatus(){
    $(function(){
        $("#submit").click(function(){            
        var val=$(&#39;input:radio[name="inlineRadioOptions"]:checked&#39;).val();            
        if(val==null){
                alert("请选中一个!");                
                return false;
            }            
            else if(val=="党员"){                
            return true;
            }
        });
    });
}
登录后复制

 

效果截图：

总体界面为：

 

1）用户名为3~16个字符，且不能包含”@”和”#”字符；

2）密码和校验密码必须一致，且长度在8个字符到16个字符；

 

3) 验证符合要求后提示“注册成功”

 

 

以上是JavaScript中如何实现注册表单的校验实例分析（图）的详细内容。更多信息请关注PHP中文网其他相关文章！

相关标签：
javascript js 表单
来源：php.cn
上一篇：Node.js中CommonJS模块规范用法总结 下一篇：javascript如何操作服务器控件代码实例详解
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
仅 CSS 方法可在单击时动态修改图像 src，无需使用 JavaScript 我需要仅使用css更改鼠标单击时图像的src喜欢img:active{}
来自于 2024-04-06 19:25:49
0
1
505
放大 d3.js 时散点图点不会保持值 这是我第一次使用d3.js，所以请耐心等待。我在vue.js文件中将其作为纯JavaScript实现。我正在尝试制作具有缩放功能的散点图。到目前为止，我几乎一切正常，但当我缩放时，...
来自于 2024-04-06 18:16:26
0
1
403
供应商特定伪元素上的 JavaScript 悬停事件 我有以下htmlinput标签。$("input[type='range']::-webkit-slider-thumb").on('hover',functi...
来自于 2024-04-06 15:35:24
0
1
274
使用 Javascript / Jquery 提交表单且不带按钮 我试图通过调用JavaScript函数并使用JQUERY/PHP执行表单来提交没有按钮的表单。我希望表单在后端静默执行，而无需重新加载页面。不幸的是，它不断返回JavaScript...
来自于 2024-04-06 14:54:03
0
2
421
使用'折叠显示”类自定义 Bootstrap 手风琴标题的外观 我想设置具有类collapseshow的面板的卡标题样式。在此示例中，它是第一个面板。我尝试使用CSS来使用.accordion.card.card-headerbutton.bt...
来自于 2024-04-06 12:53:11
0
1
376
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！