<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script type="application/javascript">

        //验证码

        function createCode(){

            var code =  Math.floor(Math.random()*9000+1000)

            var span = document.getElementById("codeSpan")

            span.innerHTML=code

            return code

        }

        //验证用户名

        function codeUser(){

            return codedata("user",/^[\u4e00-\u9fa5]{2,4}$/)

        }

        //验证密码

        function codePassword(){

            return  codedata("password",/^(?:\d+|[a-zA-Z]+|[!@#$%^&*]+)$/)

            return codePassword2()

        }

        //校验密码

        function codePassword2(){

            //获取第一次密码

            var pwd =document.getElementById("password").value

            //获取第二次密码

            var pwd2 =document.getElementById("password2").value

            //比较两次密码是否相同

            var span =document.getElementById("password2Span")

            if(pwd2==""||pwd2==null){

                span.innerHTML="确认密码不能为空"

                return false

            }else if(pwd2=pwd){

                span.innerHTML="ok"

                return true

            }else{

                span.innerHTML="两次密码不一致"

                return false

            }

        }

        //验证手机号

        function codePhone(){

            return codedata("phone",/^[+]{0,1}(\d){1,3}[ ]?([-]?((\d)|[ ]){1,12})+$/)

        }

        //验证邮箱

        function codeEmail(){

             return codedata("email",/^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/)

        }

        //封装

        function codedata(a,reg1){

            //获取用户的用户信息

            var user = document.getElementById(a).value

            var span = document.getElementById(a+"Span")

            var alt = document.getElementById(a).alt

            //创建校验规则

            var reg=reg1;

            //校验

            if(user==""|| user==null){

                span.innerHTML=alt+"不能为空"

                return false

            }else if(reg.test(user)){

                span.innerHTML=alt+"ok"

                return true

            }else{

                span.innerHTML=alt+"不符合规则"

                return false

            }

        }

        //验证籍贯

        function codeCity(){

            //获取用户选择的数据

            var sel=document.getElementById("city").value;

            //获取span

            var span=document.getElementById("citySpan");

            //校验

            if(sel!=0){

                span.innerHTML="籍贯选择成功"

                return true

            }else{

                span.innerHTML="籍贯不能为空"

                return false

            }

        }

        //验证爱好

        function codeHobby(){

            //获取爱好

            var hobbys = document.getElementsByName("hobby")

            var span = document.getElementById("hobbySpan")

            for(var i =0;i<hobbys.length;i++){

                if(hobbys[i].checked){

                    span.innerHTML="选择爱好成功"

                    return true

                }

            }

            span.innerHTML="爱好至少选择一项"

            return false

        }

        //校验是否同意公司协议

        function checkAgree(){

            document.getElementById("zc").disabled=!document.getElementById("agree").checked;

        }

        //提交判断

        function checkSub(){

            codeUser();

            codePassword();

            codePassword2();

            codePhone();

            codeEmail();

            codeCity();

            codeHobby();

            return codeUser()&&codePassword()&&codePassword2()&&codePhone()&&codeEmail()&&codeCity()&&codeHobby();

        }

    </script>

</head>

<body onload="createCode()">

    <div>

        <form name="" action="demo01.html" onsubmit="return checkSub()">

            用户名：<input type="text" name="user" id="user" value="" onblur="codeUser()" alt="用户名"><span id="userSpan"></span><br>

            密码：<input type="password" name="password" id="password" onblur="codePassword()" alt="密码"><span id="passwordSpan"></span><br>

            确认密码：<input type="password" name="password2" id="password2" onblur="codePassword2()"><span id="password2Span"></span><br>

            手机号：<input type="text" name="phone" id="phone" alt="手机号" onblur="codePhone()" alt="手机号"><span id="phoneSpan"></span><br>

            邮箱：<input type="text" name="email" id="email" alt="邮箱" onblur="codeEmail()"><span id="emailSpan"></span><br>

            性别： 男<input type="radio" name="sex" id="man" checked="checked"> &nbsp;&nbsp;

                女<input type="radio" name="sex" id="feman"><br>

            籍贯：<select id="city" name="city" onchange="codeCity()">

                    <option value="0">-请选择-</option>

                    <option value="1">广州</option>

                    <option value="2">上海</option>

                    <option value="3">北京</option>

                 </select><span id="citySpan"></span><br>

            爱好：<input type="checkbox"name="hobby" value="lol" onclick="codeHobby()">LOL &nbsp;

            <input type="checkbox"name="hobby" value="sleep"  onclick="codeHobby()">睡觉 &nbsp;

            <input type="checkbox"name="hobby" value="eat"  onclick="codeHobby()">吃饭 &nbsp;

            <input type="checkbox"name="hobby" value="listen"  onclick="codeHobby()">听歌 &nbsp;

            <span id="hobbySpan"></span>

            <br>

            个人介绍:<textarea name="inc"></textarea><br>

            验证码：<input type="text" name="code" id="code" ><span id="codeSpan" onclick="createCode()"></span><br>

            <input type="checkbox"name="agree" id="agree" onclick="checkAgree()" >是否同意本公司协议<br>

            <input type="submit" name="zc" id="zc" value="立即注册" disabled="disabled">

        </form>

    </div>

</body>

</html>

js实现表单验证的更多相关文章

  1. ★★★【卡法 常用js库】： js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  2. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  3. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  4. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  5. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  6. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  7. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

  8. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  9. 原生js制作表单验证，基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  10. JS实战 · 表单验证

    思路:         1.定义页面             通过表格格式化表单:             表格行都有自己的背景颜色:             单元格中的数据(文本等)用div进行封装 ...

随机推荐

  1. dd 命令切割合并文件

    dd 命令切割合并文件 /tmp # dd if=a.bin of=c.bin bs=128k skip=18 //一个块为128K,跳过前18块. 18+1 records in 18+1 reco ...

  2. 如何用VMD将轨迹文件制作动画（转载）

    转载自:http://blog.sina.com.cn/s/blog_63f794950101dtte.html 很多同学想从dcd(NAMD)或者trr(gromac)文件提取一段轨迹文件做成动画. ...

  3. Vue H5拖拽实例

    需求:需要把左侧的数据表,拖拽到右侧的表关联区域 左侧数据表HTML: <h3 class="data-block">数据表</h3> <a-inpu ...

  4. Asp.Net WebAPI的简介及创建

    一.WebAPI简介 ASP.NET Web API 是一种框架,用于轻松构建可以由多种客户端(包括浏览器和移动设备)访问的 HTTP 服务.ASP.NET Web API 是一种用于在 .NET F ...

  5. cordova 环境配制和创建插件

    环境配制 英文网站:http://cordova.apache.org/ 中文网站:http://cordova.axuer.com/ 安装Cordova Cordova的命令行运行在Node.js ...

  6. Unity Plugins的使用方法

    一.为插件设置平台的方法 unity5之前,是通过把插件搞到对应目录进行区分平台的(比如在build target是ios平台时只把IOS目录的插件build进去),unity5之后提供了设置平台/c ...

  7. springBoot整合spring security+JWT实现单点登录与权限管理--筑基中期

    写在前面 在前一篇文章当中,我们介绍了springBoot整合spring security单体应用版,在这篇文章当中,我将介绍springBoot整合spring secury+JWT实现单点登录与 ...

  8. Q200510-02: 重复的DNA序列 程序解法

    问题:  重复的DNA序列 所有 DNA 都由一系列缩写为 A,C,G 和 T 的核苷酸组成,例如:“ACGAATTCCG”.在研究 DNA 时,识别 DNA 中的重复序列有时会对研究非常有帮助. 编 ...

  9. 在SQL中利用通项公式形成三角序列

    在前作 https://www.cnblogs.com/xiandedanteng/p/12735898.html中,我们可以用Java程序制成三角序列. 1, 2,2, 3,3,3, 4,4,4,4 ...

  10. ByteCTF2019

    VIP 第一阶段: 先检查一下程序开的保护: 程序只开了canary和nx保护.接下来用IDA分析反编译出的伪代码 如上图,载edit函数中我们可以控制size的大小,并且程序没有做任何检查,我们再跟 ...