简单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. ADFS 2016 & Dynamics CRM

    参考:https://blog.csdn.net/vic0228/article/details/80188291 webapp 获取token https://adfs.demo.local/adf ...

  2. jdk （Java Development Kit）

    JDK是 Java 语言的软件开发工具包,主要用于移动设备.嵌入式设备上的java应用程序.JDK是整个java开发的核心,它包含了JAVA的运行环境(JVM+Java系统类库)和JAVA工具. JD ...

  3. C# 中定义斜杠 \

    \ 是转义符 如     \’ 单引号    \” 双引号    \\ 反斜杠    \0 空    \a 警告(产生峰鸣)    \b 退格    \f 换页    \n 换行    \r 回车   ...

  4. VulnStack靶场实战(未完成)

    环境搭建 https://www.cnblogs.com/HKCZ/p/11760213.html 信息收集 目录爆破 这里发现有phpmyadmin目录,这里可以直接获取webshell 参照: h ...

  5. JavaScript LinkedList

    function LinkedList() { var Node = function(element) { this.element = element; this.next = null } va ...

  6. 微信小程序(三)--小程序UI开发

    一.UI介绍 所谓的UI(user Interface)开发指的就是小程序应用界面的开发,在小程序开发框架中会为我们提供一系列的基础组件,例如HTML开发中为我们所提供的一些最基础的标签.需要注意的是 ...

  7. mysql双主+keepalived架构

    架构展示 操作系统 centos6.5 数据库 mysql5.7 master1 10.0.254.148 master2 10.0.254.147 VIP 10.0.254.88 (keepaliv ...

  8. jquery动态加载select选项

    $("#selectid").get(0).options.add(new Option(json数据))

  9. 在pythonanywhere部署你的第一个应用

    pythonanywhere是一个免费的托管python的代码,可以测试你的web应用,用起来还是比较方便的,现在就来介绍如何在pythonanywhere部署你的应用. 下载你的代码 我的代码是托管 ...

  10. 一、Iframe

    一.Iframe 自适应iframe的高 <!-- frameborder :设置iframe的边框 scrolling:设置iframe的滚动条 src:设置iframe的路径 onload: ...