简单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. MongoDb python连接

    方式一:简写 client = MongClient() 方式二:指定端口和地址 client = MongoClient('localhost':27017) 方式三:使用URI  --统一资源定位 ...

  2. Python笔记(二十一)_内置函数、内置方法

    内置函数 issubclass(class1,class2) 判断class1类是否为class2类的子类,返回True和False 注意1:类会被认为是自身的子类 >>>issub ...

  3. 校内模拟赛T5：连续的“包含”子串长度（ nekameleoni？） —— 线段树单点修改，区间查询 + 尺取法合并

    nekameleoni 区间查询和修改 给定N,K,M(N个整数序列,范围1~K,M次查询或修改) 如果是修改,则输入三个数,第一个数为1代表修改,第二个数为将N个数中第i个数做修改,第三个数为修改成 ...

  4. 公司C++规范学习

    目录 公司C++规范学习 语法部分 风格/约定 公司C++规范学习 语法部分 class和struct关键字的选择:class表示被封装的用户自定义类型,不公开定义非静态数据成员,struct表示数据 ...

  5. 洛谷P5018 对称二叉树——hash

    给一手链接 https://www.luogu.com.cn/problem/P5018 这道题其实就是用hash水过去的,我们维护两个hash 一个是先左子树后右子树的h1 一个是先右子树后左子树的 ...

  6. Spring切面编程之AOP

    AOP 是OOP 的延续,是Aspect Oriented Programming 的缩写,意思是面向切面编程.可以通过预编译方式和运行期动态代理实现在不修改源代码的情况下给程序动态统一添加功能的一种 ...

  7. ArrayBlockingQueue使用

    阻塞与非阻塞: 阻塞: 阻塞调用是没有获得资源则挂起进程,被挂起的进程进入休眠状态,调用的函数只有在得到结果之后才返回,进程继续. 对象是否处于阻塞模式和函数是不是阻塞调用有很强的相关性,但并不是一一 ...

  8. 二叉树BinTree4种遍历及其应用

    前序遍历 template<class T> void BinTree<T>::PreOrder(BinTreeNode<T>*subTree){ //前序遍历以s ...

  9. 使用grunt0.4进行js代码混淆

    1.grunt是基于node,node需要>=0.8.0的稳定版本(奇数是开发版,偶数是稳定版) 2.安装grunt脚手架 (mac电脑需要权限  在前面加上 sudo) npm install ...

  10. linux性能分析工具Procs