简单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. iframe父页面和子页面高度自适应

    父页HTML: <iframe  id="mainframe" name="mainframe"  style="width:100%;&quo ...

  2. 3.创建线程的第二种写法,继承threading.Tread类,重写run方法

    #创建线程的第二种写法 #1.自定义一个类 #2.继承Thread #3.重写run()方法 import threading,time,random class MyThread(threading ...

  3. 机器学习实战_基于Scikit-Learn和Tensorflow读书笔记

    第一部分 机器学习基础 第二部分 神经网络和深度学习 第9章 运行Tensorflow 分布式系统:分布式系统的定义是这个系统建立在网络的操作系统,具有高度的内聚性和透明性,它与网络的区别在于高层软件 ...

  4. TCP协议分析（包结构）---转

    TCP首部格式 tcp数据是被封装在IP数据包中的,和udp类似,在IP数据包的数据部分.tcp数据包的格式如下: 源端口号和目的端口号(寻址)与udp中类似,用于寻找发端和收端应用进程.这两个值加上 ...

  5. 在Linux下将HTML文件转换成PDF文件

    今天要写一个上交的作业,本来是想用Office Word来写的,但是,我的Office貌似不能用了,但是,Linux下的LibreOffice写出的文档,在打印的时候是经常出现乱码的.所以,后来想到可 ...

  6. python自定义迭代器对象以及可迭代对象

    # coding=utf8 from collections import Iterator from collections import Iterable #迭代器对象 class OwnIter ...

  7. c# 添加数据

    /// <summary> /// 新增一条省份记录 /// </summary> /// <param name="model"></p ...

  8. Ajax爬取百度图片

    目标网址 分析网址:http://image.baidu.com/search/index?tn=baiduimage&ipn=r&ct=201326592&cl=2& ...

  9. RDD缓存

    RDD的缓存 Spark速度非常快的原因之一,就是在不同操作中可以在内存中持久化或缓存数据集.当持久化某个RDD后,每一个节点都将把计算的分片结果保存在内存中,并在对此RDD或衍生出的RDD进行的其他 ...

  10. 【问题解决方案】关于Python中的语句 ' %matplotlib inline '

    跟进小项目#GirlsInAI#-可视化时遇到的语句,之前没有遇到过 在Stack Overflow上看到了一个解释: IPython有一组预定义的"魔术函数",您可以使用命令行样 ...