<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=GBK">

        <title>表单校验。</title>

    </head>

    <body>

        <!--

        表单校验。

        -->

        <script type="text/javascript">

            /*

            //校验用户名

            function checkUser(){

                var flag;

                var oUserNode = document.getElementsByName("user")[0];

                var name = oUserNode.value;

                //定义正则表达式的三种方式
　　　　　　　　　　//这里的i是不区分大小写，同时还有g代表可以进行全局匹配，m代表可以多行匹配

                var reg = new RegExp("^[a-z]{4}$","i");//必须是四个字母。 

//                reg =  new RegExp("^\\d{4}$");// 必须是四个数字。

//                reg = /^\d{4}$/;

                var oSpanNode = document.getElementById("userspan");

//                if(name=="abc"){

                if(reg.test(name)){

                    oSpanNode.innerHTML = "用户名正确".fontcolor("green");

                    flag = true;

                }else{

                    oSpanNode.innerHTML = "用户名错误".fontcolor("red");

                    flag = false;

                }

                return flag;

            }

            */

            /*

             * 发现很多框的校验除了几个内容不同外，校验的过程是一样的。

             * 所以进行了代码的提取。

             *

             */

            function check(name,reg,spanId,okinfo,errinfo){

                var flag;

                var val = document.getElementsByName(name)[0].value;

                var oSpanNode = document.getElementById(spanId);

                if(reg.test(val)){

                    oSpanNode.innerHTML = okinfo.fontcolor("green");

                    flag = true;

                }else{

                    oSpanNode.innerHTML = errinfo.fontcolor("red");

                    flag = false;

                }

                return flag;

            }

            //校验用户名。

            function checkUser(){

                var reg = /^[a-z]{4}$/i;

                return check("user",reg,"userspan","用户名正确","用户名错误");

            }

            //校验密码；

            function checkPsw(){

                //这里只是简单使用Lee正则表达式

                var reg  = /^\d{4}$/;

                return check("psw",reg,"pswspan","密码格式正确","密码格式错误");

            }

            //校验确定密码。只要和密码一致即可。

             function checkRepsw(){

                var flag;

                //获取密码框内容。

                var pass  = document.getElementsByName("psw")[0].value;                

                //获取确认密码框内容。

                var repass  = document.getElementsByName("repsw")[0].value;

                //获取确认密码的span区域。

                var oSpanNode = document.getElementById("repswspan");

                if(pass==repass){

                    oSpanNode.innerHTML = "两次密码一致".fontcolor("green");

                    flag = true;

                }else{

                    oSpanNode.innerHTML = "两次密码不一致".fontcolor("red");

                    flag = false;

                }

                return flag;

             }

            //校验邮件

            function checkMail(){

                var reg = /^\w+@\w+(\.\w+)+$/i;

                return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");

            }

            // 提交事件处理。

            function checkForm(){

//                alert(checkUser() +"--"+ checkPsw() +"--"+ checkRepsw() +"--"+ checkMail());

                if(checkUser() && checkPsw() && checkRepsw() && checkMail())

                    return true;

                return false;

            }

        //自定义的提交方法

            function mySubmit(){

                var oFormNode = document.getElementById("userinfo");

                oFormNode.submit();

            }

        </script>

        <form id="userinfo" onsubmit="return checkForm()">

            用户名称：<input type="text" name="user" onblur="checkUser()" />

            <span id="userspan"></span>

            <br/>

            输入密码：<input type="text" name="psw" onblur="checkPsw()"  />

            <span id="pswspan"></span>

            <br/>

            确定密码：<input type="text" name="repsw" onblur="checkRepsw()" />

            <span id="repswspan"></span>

            <br/>

            邮件地址：<input type="text" name="mail" onblur="checkMail()"  />

            <span id="mailspan"></span>

            <br/>

            <input type="submit" value="提交数据" />

        </form>

        <hr/>

        <!--自定提交按钮-->

        <input type="button" value="我的提交" onclick="mySubmit()" />

    </body>

</html>

表单校验--js部分的更多相关文章

  1. day32(表单校验js和jquery表单校验)

    校验用户名.密码.密码一直性. <style> .error { color: red } .success { color: green } </style> <scr ...

  2. Struts2——（6）表单校验

    一.表单校验 js,jquery是客户端校验,今天要说的是客户端校验. 禁止js,或者机器代码会破坏客户端校验,所以客户端校验相对不安全. 服务器端校验是基于java代码在服务器端进行校验,特点是相应 ...

  3. vue.js基础知识篇(7):表单校验详解

    目录 网盘 第12章:表单校验 1.npm安装vue-validator $ npm install vue-validator 代码示例: var Vue=require("vue&quo ...

  4. Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验

    vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...

  5. Vue.js表单校验；动画指令；避免内存泄露。

    Vue.js表单校验: 动画指令:创建自定义的滚动指令. 避免内存泄露. 避免内存泄露 在单页面应用开发时SPA,用户无需刷新浏览器.所以javascript应用需要自行清理组件来防止内存占用不断增长 ...

  6. 【转】vue.js表单校验详解

    官方文档:https://monterail.github.io/vuelidate/ https://github.com/monterail/vuelidate 1.npm安装vue-valida ...

  7. js：表单校验（获取元素、事件）

    1.表单校验步骤 (1)确定事件(submit事件),创建一个函数并和该事件绑定. (2)书写函数对输入的数据是否合法进行校验(需要设定ID并通过ID来获取用户输入的数据的值). (3)输入的信息合法 ...

  8. 利用jquery.validate以及bootstrap的tooltip开发气泡式的表单校验组件

    表单校验是页面开发中非常常见的一类需求,相信每个前端开发人员都有这方面的经验.网上有很多成熟的表单校验框架,虽然按照它们默认的设计,用起来没有多大的问题,但是在实际工作中,表单校验有可能有比较复杂的个 ...

  9. AngularJS 1.2.x 学习笔记（表单校验篇）

    https://my.oschina.net/cokolin/blog/526911 摘要: 本文首发于 blog.csdn.net/vipshop_ebs/article/details/39472 ...

随机推荐

  1. C# RSA的加解密与签名验证

    最近做了一个CS架构的序列号生成器,用到 RSA加解密技术,以下是RSA的使用方法 RSA加密算法是一种非对称加密算法.在公钥加密标准和电子商业中RSA被广泛使用.RSA是1977年由罗纳德•李维斯特 ...

  2. axis调用webservice客户端开发

    第一步:wsdl2Java.bat文件编写 Axis_Lib表示依赖的jar包路径 Output_Path表示生成的class路径 Package包名 还需要手动更改 -p %Package%表示we ...

  3. codeforces:Roads in the Kingdom分析和实现

    题目大意:国家有n个城市,还有n条道路,每条道路连通两个不同的城市,n条道路使得所有n个城市相互连通.现在国家经费不足,要关闭一条道路.国家的不便度定义为国家中任意两个不同的城市之间的距离的最大值,那 ...

  4. day63-webservice 03.解析cxf提供的例子

    Path配置: C:\Program Files (x86)\ScanSign;E:\app\zhongzh\product\11.2.0\dbhome_1\bin;D:\app\zhongzh\pr ...

  5. ajax load事件

    ajax.load  使用ajax 来改变div元素文本. load( url [, data][, callback] ) load()方法的传递方式根据参数data来自动指定.如果没有参数传递,则 ...

  6. shell动态替换变量

    可以对env指定U 或者 L,  得到U或者L下的IP地址列表, env可作为shell的参数列表传入 env=UL_ips=(x.x.x.x  y.y.y.y)U_ips=(w.w.w.w  z.z ...

  7. 22.NULL 值

    NULL 值是遗漏的未知数据. 默认地,表的列可以存放 NULL 值. 本章讲解 IS NULL 和 IS NOT NULL 操作符. SQL NULL 值 如果表中的某个列是可选的,那么我们可以在不 ...

  8. hadoop2.2分布式环境搭建

    hadoop2.2的分布式环境需要配置的参数更多.但是需要安装的系统软件和单节点环境是一样的. 运行hadoop在非安全环境 hadoop的配置文件有两类: 1:只读的默认配置文件: core-def ...

  9. wireshark抓取qq数据包

    抓包接口设置成本地连接 点击start,登录qq,输入oicq进行过滤qq包 找到第一个OICQ,点击后,点击oicq-IM software 可以看到自己登录的QQ号码为765343409 本机IP ...

  10. Django-Web框架之Hello Django!

    1.首先我们配置guest目录下面的settings.py问,将我们的sign应用添加到项目中.如下图所示: 2.我们通过地址栏:http://127.0.0.1:8001/index/访问Djang ...