简单js表单验证demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

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

    <title>Document</title>

    <script>

        //当用户名获取焦点时

        function focus_username(){

            document.getElementById("user_res").innerHTML="<font color='#f00'>请输入用户名</font>";

        }

        //当用户名失去焦点时

        function blur_username(){

            var user_value=document.getElementsByName("username")[0].value;

            if(user_value.length===0){

            document.getElementById("user_res").innerHTML="<font color='#f00'>你没有输入用户名</font>";

                    return false;

                    //判断其长度是否在5~18之间  如果不在就提示用户

            }else if(user_value.length<5||user_value.length>18)

            {

            document.getElementById("user_res").innerHTML="<font color='#f00'>用户名长度必须在5-18之间</font>";

                    return false;

            }else if(!checkUser(user_value)){

                //用户名还有特殊符号

            document.getElementById("user_res").innerHTML="<font color='#f00'>用户名含有特殊符号</font>";

                    return false;

            }else{

                //用户名合法

            document.getElementById("user_res").innerHTML="<font color='#00f'>用户名合法</font>";

                    return true;

            }

        }

        //密码获取焦点时

        function focus_password(){

            document.getElementById("pass_res").innerHTML="<font color='#f00'>请输入密码</font>";

        }

        //密码失去焦点时

        function blur_password(){

            var user_value=document.getElementsByName("password")[0].value;

            if(user_value.length===0){

            document.getElementById("pass_res").innerHTML="<font color='#f00'>你没有输入密码</font>";

                    return false;

                    //判断其长度是否在5~18之间  如果不在就提示用户

            }else if(user_value.length<5||user_value.length>18)

            {

            document.getElementById("pass_res").innerHTML="<font color='#f00'>用密码长度必须在5-18之间</font>";

                    return false;

            }else{

                //密码合法

            document.getElementById("pass_res").innerHTML="<font color='#00f'>密码合法</font>";

                    return true;

            }

        }

         function checkUser(user){

            var arr=["<",">","#","?","%"];

            var arr_length=arr.length;

            var user_length=user.length;

            for(var i=0;i<arr_length;i++){

                for(var j=0;j<user_length;j++){

                    if(arr[i]===user.charAt(j)){

                        return false;

                    }

                }

            }

            //表示用户名合法

             return true;

         }

         //提交提交表单验证

          function checkForm(){

            var user_flag=blur_username();

            var pass_flag=blur_password();

            if(user_flag && pass_flag){

                alert("提交合法表单");

                 return true;

            }else{

                alert("输入不合法");

                return false;

            }

          }

    </script>

</head>

<body>
　　　　　　　　　　　　　　　　　　　　　　　　　　<!--action 参数自定义跳转页面-->

    <form name='form1' onsubmit='return checkForm()' action='index.php'>

        <table width='600' align='center'>

            <tr>

                <td align='right' width='150'>用户名:</td>

                <td width='100'><input type='text' name='username' onfocus='focus_username()' onblur = 'blur_username()'/></td>

                <td><span id="user_res"></span></td>

            </tr>

            <tr>

                <td align='right' width='100'>密码:</td>

                <td width='100'><input type='password' name='password' onfocus='focus_password()' onblur = 'blur_password()'/></td>

                <td><span id="pass_res"></span></td>

            </tr>

            <tr>

                <td></td>

                <td><input type='submit' value='提交' /></td>

            </tr>

        </table>

    </form>

</body>

</html>

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

  1. angular js 表单验证

    <!doctype html> <html ng-app="myapp"> <head> <meta charset="UTF- ...

  2. 用jQuery写的最简单的表单验证

    近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...

  3. Js表单验证控件-02 Ajax验证

    在<Js表单验证控件(使用方便,无需编码)-01使用说明>中,写了Verify.js验证控件的基本用法,基本可以满足大多数验证需求,如果涉及服务端的验证,则可以通过Ajax. Ajax验证 ...

  4. angularjs学习第四天笔记（第一篇：简单的表单验证）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  5. JS表单验证-12个常用的JS表单验证

    JS表单验证-12个常用的JS表单验证 最近有个项目用到了表单验证,小编在项目完结后的这段时间把常用的JS表单验证demo整理了一下,和大家一起分享~~~ 1. 长度限制 <p>1. 长度 ...

  6. js 表单验证控制代码大全

    js表单验证控制代码大全 关键字:js验证表单大全,用JS控制表单提交 ,javascript提交表单:目录:1:js 字符串长度限制.判断字符长度 .js限制输入.限制不能输入.textarea 长 ...

  7. jquery.validation.js 表单验证

    jquery.validation.js 表单验证   官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuer ...

  8. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  9. JS表单验证类HTML代码实例

    以前用的比较多的一个JS表单验证类,对于个人来说已经够用了,有兴趣的可以在此基础上扩展成ajax版本.本表单验证类囊括了密码验证.英文4~10个 字符验证. 中文非空验证.大于10小于100的数字.浮 ...

随机推荐

  1. Vue事件总线

    一 项目结构 二 main.js import Vue from "vue"; import App from "./App.vue"; import Tool ...

  2. log4j配置及异常、解决办法

    配置: ### set log levels ### D只有一个E也只有一个 log4j.rootLogger = debug,stdout,D,E ### 输出到控制台 ### log4j.appe ...

  3. python学习第三十二天函数的闭包

    python函数中嵌套另外一个函数,另外一个函数形成一个封闭的环境,里面的那个函数叫做函数的闭包,函数的闭包好处可以保护函数里面的变量,下面讲述函数闭包的实例和用法 1,函数闭包的实例 a='cat' ...

  4. ScriptManager(脚本控制器)

    资料中如实是说:       1, ScriptManager(脚本控制器)是asp.net ajax存在的基础.      2, 一个页面只允许有一个ScriptManager,并且放在其他ajax ...

  5. nginx+lua+redis实现灰度发布_test

    nginx+lua+redis实现灰度发布: 灰度发布是指在黑白之间能够平滑过渡的一种方式 AB test就是一种灰度发布方式,让一部分用户继续用A,一部分用户开始用B,如果用户对B没有什么反对意见, ...

  6. art-template补充

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  7. 关于手机端在同一个Grid中使用不同的布局展现即Layout的使用

    标题可能说的不是很清楚,我举个栗子好了,现在你正在写手机端的一个审批模块,这个模块要求能够展示所有待审批的信息 比如出差申请,请假申请,加班申请,以及报销申请 那么我的思路有两个 1:建立一个Tab页 ...

  8. 2017ICPC沈阳赛现场赛 L-Tree (dfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=6228 题目大意:给一棵树,需要用k种颜色给树上的节点染色,问你在最优的染色方案下,相同颜色的节点连接的 ...

  9. C++链接器

    链接器把多个二进制的目标文件(object file)链接成一个单独的可执行文件 在链接过程中,它必须把符号(变量名.函数名等一些列标识符)用对应的数据的内存地址(变量地址.函数地址等)替代,以完成程 ...

  10. BZOJ3926 诸神眷顾的幻想乡

    传送门 树上SAM! 显然如果树上一条一条字符串放的话那么是n^2的w 但是 题目的性质非常吼啊! 20个叶子节点 我们就可以 把所有叶子结点拎出来当根 全部扔到一个SAM里 就吼啦 最后的答案是   ...