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

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 实现注册表单的校验的更多相关文章

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

    说明:在点击提交时进行表单校验,具体要求如下: 1)用户名为3~16个字符,且不能包含”@”和”#”字符: 2)密码和校验密码必须一致,且长度在8个字符到16个字符: 3)兴趣爱好至少选择一项: 4) ...

  2. 第一百六十节，封装库--JavaScript，ajax注册表单到数据库

    封装库--JavaScript,ajax注册表单到数据库 效果图 前台js var biaodan = $().xu_lie_biao_dan($('form').sh_jd()); //序列化获取表 ...

  3. Html注册表单示例

    注册表单示例,出自<网页开发手记:Html,CSS,JavaScript实战详解>.   <html>   <head>   <title>注册表单&l ...

  4. 免费 PSD 下载： 20个精美的登录和注册表单

    注册表单有许多不同的形状和尺寸,有的只是单个的输入框,有的则需要多个步骤.登录表单的设计将定义网站的性质,因此它应进行针对性的设计.下面的列表提供了20个醒目的登录和注册表单设计为您提供灵感. 您可能 ...

  5. HTML6注册表单输入日志标题

    一.找到元素. var d = document.getElementById("") var d = document.getElementsByName("" ...

  6. 4.前端注册表单验证 && 表单回填

    表单验证 前端表单验证就是在 jsp 页面中添加验证逻辑,使得注册表单在传入后台之前先进行一次表单验证 在jsp文件里的 head 块里面添加 jQuery 代码 <script type=&q ...

  7. JS判定注册表单的几个方式 及 Ajax进行用户名存在判定

    最近感觉不赶紧把代码逻辑记一下梳理一下,再做的时候就容易进入"逻辑误区". 有个表单,简单点. <!DOCTYPE html> <!-- 注册表单验证,用户名格式 ...

  8. 一款基于jQuery的带Tooltip表单验证的注册表单

    今天给大家分享一款基于jQuery的注册表单,这款注册表单的特点是确认提交注册信息时,表单会自动验证所填写的信息,如果信息填写有误,即会在相应的字段内以Tooltip提示框的形式显示错误信息.这款jQ ...

  9. ajax 提交 注册表单 到MySQL数据库

    今天按照要求,要做一个登陆.注册表单,本来样式做好就行了,本来咱就是干前端的,但让咱自己都没想到的是,不到一个小时竟然都干完了,实在闲的蛋疼,就想到链接数据库玩,遥想当年,毕竟咱也是写过后台的,哪知, ...

随机推荐

  1. 第十四章 openwrt 安装 python

    需要安装libffi,python-mini,python.libffi以及python-mini需要安装在python之前     如果部分软件包不一样可以在下面的web后台搜索,搜索前先opkg ...

  2. web小流量实验方案

    近期在思考怎么做小流量,在网上搜了一下,总结例如以下: 1.前提,站点pv已经达到了一定的规模,比方上百万pv,不做小流量冒然更新功能,可能会带来大面积流量损失.在这样的前提下须要做小流量实验 2.什 ...

  3. JSON数据转换成table表格

    <%@ page contentType="text/html; charset=UTF-8" %> <%@taglib uri="/struts-ta ...

  4. 2)Linux程序设计入门--进程介绍

    )Linux程序设计入门--进程介绍 Linux下进程的创建 前言: 这篇文章是用来介绍在Linux下和进程相关的各个概念.我们将会学到: 进程的概念 进程的身份 进程的创建 守护进程的创建 .进程的 ...

  5. OpenCV Harris 角点检测子

    Harris 角点检测子 目标 本教程中我们将涉及: 有哪些特征?它们有什么用? 使用函数 cornerHarris 通过 Harris-Stephens方法检测角点. 理论 有哪些特征? 在计算机视 ...

  6. Spark Streaming：大规模流式数据处理的新贵（转）

    原文链接:Spark Streaming:大规模流式数据处理的新贵 摘要:Spark Streaming是大规模流式数据处理的新贵,将流式计算分解成一系列短小的批处理作业.本文阐释了Spark Str ...

  7. Linux ALSA音频PCM播放编程

    使用ALSA播放两个频率的单音,并使用GNU Radio中的Audio Source和FFT来观测声音的频谱. #include <alsa/asoundlib.h> #include & ...

  8. C++中函数调用时的三种参数传递方式详解

    在C++中,参数传递的方式是“实虚结合”. 按值传递(pass by value) 地址传递(pass by pointer) 引用传递(pass by reference) 按值传递的过程为:首先计 ...

  9. C#中的yield

    一.C#中yield关键字用于遍历循环中,yield语句的两种形式 yield return用于返回IEnumerable<T>, yield break用于终止循环遍历. 二.yield ...

  10. Hadoop I/O

    Hadoop自带一套原子操作用于数据I/O.当中一些技术,如数据完整性保持和压缩,对于处理多达数个TB的数据时.特别值得关注.另外一些Hadoop工具或API.所形成的构建模块可用于开发分布式系统.比 ...