使用JavaScript 实现注册表单的校验

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

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>

<div class="container">

    <form class="form-horizontal"  role="form">

        <div class="form-group">

        <div class="col-sm-6" >

            <legend class="title" >用户注册信息</legend>

        </div>

        </div>

        <div class="form-group">

            <label for="user-name" class="col-sm-2 control-label">用户名：</label>

            <div class="col-sm-3">

                <input type="text" class="form-control" id="user-name" onblur="checkUserName()"

                       placeholder="请输入用户名"/>

            </div>

            <div class="col-sm-2">

                <span id="nameInfo"></span>

            </div>

        </div>

        <div class="form-group">

            <label for="password" class="col-sm-2 control-label">密码：</label>

            <div class="col-sm-3">

                <input type="password" class="form-control" id="password"  onblur="checkRepassword()"

                       placeholder="请输入密码"/>

            </div>

            <div class="col-sm-2">

                <span id="passwordInfo"></span>

            </div>

        </div>

        <div class="form-group">

            <label for="repassword" class="col-sm-2 control-label">校验密码：</label>

            <div class="col-sm-3">

                <input type="password" class="form-control" id="repassword" onblur="checkRepassword()"

                       placeholder="请输入校验密码">

            </div>

            <div class="col-sm-2">

                <span id="repasswordInfo"></span>

            </div>

        </div>

        <div class="form-group">

            <label  for="nativeplace" class="col-sm-2 control-label">籍贯：</label>

            <div class="col-sm-2">

                <select id="nativeplace">

                    <option value="zhejiang">浙江</option>

                    <option value="fujian">福建</option>

                    <option value="anhui">安徽</option>

                    <option value="sichuan">四川</option>

                </select>

            </div>

        </div>

        <div class="form-group">

            <label class="col-sm-2 control-label">兴趣爱好：</label>

            <div class="col-sm-6" >

                <div 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>

                    </div>

            </div>

       </div>

        <div class="form-group" onblur="checkStatus()">

            <label  class="col-sm-2 control-label">政治面貌：</label>

            <div 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>

            </div>

        </div>

        <div class="form-group">

            <div 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>

            </div>

        </div>

</form>

</div>

<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");

    $('input[type=checkbox]').click(function(){

        if($("input[name='hobby']:checked").length!=0 ) {

            return true;

        }

    });

}

//验证政治面貌（必须为党员）

function checkStatus(){

    $(function(){

        $("#submit").click(function(){

            var val=$('input:radio[name="inlineRadioOptions"]:checked').val();

            if(val==null){

                alert("请选中一个!");

                return false;

            }

            else if(val=="党员"){

                return true;

            }

        });

    });

}

效果截图：

总体界面为：

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

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

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

使用JavaScript 实现注册表单的校验的更多相关文章

JavaScript：使用JavaScript 实现注册表单的校验
说明:在点击提交时进行表单校验,具体要求如下: 1)用户名为3~16个字符,且不能包含”@”和”#”字符: 2)密码和校验密码必须一致,且长度在8个字符到16个字符: 3)兴趣爱好至少选择一项: 4) ...
04004_使用JavaScript完成注册表单数据校验
1.需求分析 (1)用户在进行注册的时候会输入一些内容,但是有些用户会输入一些不合法的内容,这样会导致服务器的压力过大,此时我们需要对用户输入的内容进行一个校验(前端校验和后台校验): (2)前端校验 ...
第一百六十节，封装库--JavaScript，ajax注册表单到数据库
封装库--JavaScript,ajax注册表单到数据库效果图前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...
Html注册表单示例
注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>. <html> <head> <title>注册表单&l ...
免费 PSD 下载： 20个精美的登录和注册表单
注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...
HTML6注册表单输入日志标题
一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...
4.前端注册表单验证 && 表单回填
表单验证前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...
JavaScript修改注册表
JavaScript修改注册表 2009-04-14 11:22:13| 分类: JS相关 | 标签: |字号大中小订阅注册表有关安全设置项的说明: 注册表路径: HKEY_CURRE ...
JS判定注册表单的几个方式及 Ajax进行用户名存在判定
最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...

随机推荐

加载JS
我与python3擦肩而过（一）—— Dict与collections.OrderredDict邂逅
最近一直在撸Python Data Analysis上的代码(书是基于Python2的,小白我用的python3),所以我下的时候多少有些改动. 这是9.4中的nltk词频分析关于Dict_key的问 ...
swift系统学习第一章
第一节:变量,常量,类型推断,字符,字符串 //swift学习第一节 /* 变量常量类型推断字符字符串 */ import UIKit //变量 var str = "swift&q ...
HDU5441 Travel 并查集
http://acm.hdu.edu.cn/showproblem.php?pid=5441 无向图,n个点,m条带权边,q次询问,给出数值d,点a可以到点b当且仅当存在一条路线其中最大的权值不超过d ...
SQL基础2
create database fuxi --创建一个名为“fuxi”的数据库go --连接语句use fuxi --使用名为“fuxi”的数据库gocreat ...
[转]慎用slice
在go中,slice是对固定长度数组的一段切片,其底层是用对数值空间的指针实现的. 在slice的赋值过程中,slice的容量会被初始化成“数组长度 - slice的起点位置”,举例说明: 假设有长度 ...
[转]ELO等级分体系
[译前注:有读者问ELO等级分体系的说明.观网上好象没发现单篇文章就说得通俗清晰的,只好把找到几篇文章拿在一起合译互相补充.其间发现具体说法稍有差异,但总的来说概念一致.FIDE已经专门制定计算表了, ...
jquery.autocomplete自动补全功能
项目实例: 一:js //SupplierAutoComplete.js $().ready(function () { $("#txtSupplier").autocomplet ...
机器学习技法-决策树和CART分类回归树构建算法
课程地址:https://class.coursera.org/ntumltwo-002/lecture 重要!重要!重要~ 一.决策树(Decision Tree).口袋(Bagging),自适应增 ...
Object类、包装类、内部类详解
1.Object类 1.概念: 1.1 所有类在创建时都默认继承了java.lang.Object 1.2 所有类对象都可以声明为类对象的引用 Object ob1=new String(); Obj ...

使用JavaScript 实现注册表单的校验

使用JavaScript 实现注册表单的校验的更多相关文章

随机推荐

热门专题