简单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. java数组，遍历数组

    数组:一组具有相同数据类型的集合(容器) 1.数组声明格式: 数据类型 [] 数组名 = new 数据类型[长度]: 数组长度一旦确定无法更改. 数组里的数据必须是相同类型或自动向上转型后兼容的类型 ...

  2. 在LIPS表追加拣配数量PIKMG字段（转）

    原文地址:https://blog.csdn.net/zhongguomao/article/details/43451127 最近比较忙,此方案出后测试了很多种情况都存在问题,只能留待以后处理了.. ...

  3. quartz CronExpression

    一.Quartz Cron 表达式支持到七个域 名称 是否必须 允许值 特殊字符 秒 是 0-59 , - * / 分 是 0-59 , - * / 时 是 0-23 , - * / 日 是 1-31 ...

  4. 什么是HTTP协议？常用的状态码有哪些？

    一.HTTP简介 HTTP协议是Hyper Text Transfer Protocol(超文本传输协议)的缩写,是用于从万维网(WWW:World Wide Web )服务器传输超文本到本地浏览器的 ...

  5. confd + Nacos | 无代码侵入的配置变更管理

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 来文来自阿里中间件投稿 作者:风卿,Nacos Committer,阿里巴巴开发工程师 为什么要支持confd,老的应用配置 ...

  6. 【学习总结】java数据结构和算法-第二章-数据结构和算法概述

    总目录链接 [学习总结]尚硅谷2019java数据结构和算法 github:javaDSA 目录 数据结构和算法的关系 几个实际编程中的问题 线性结构和非线性结构 数据结构和算法的关系 几个实际编程中 ...

  7. 【学习总结】GirlsInAI ML-diary day-20-初识 Kaggle

    [学习总结]GirlsInAI ML-diary 总 原博github链接-day20 初识kaggle 1-注册一个账号(由于被谷歌收购,因此可能需要梯子) 2-Competition - 学会看一 ...

  8. 17-正交矩阵和Gram-Schmidt正交化

    一.视频链接 1)正交矩阵 定义:如果一个矩阵,其转置与自身的乘积等于单位向量,那么该矩阵就是正交矩阵,该矩阵一般用Q来表示,即$Q^TQ=QQ^T=I$,也就是$Q^T=Q^{-1}$,即转置=逆 ...

  9. C Primer Plus 学习 第四章

    字符串与格式化输入/输出 函数 strlen() 关键字 const 利用#define 和 const创建符号常量 #include <stdio.h> #include <str ...

  10. Sass-@while

    @while 指令也需要 SassScript 表达式(像其他指令一样),并且会生成不同的样式块,直到表达式值为 false 时停止循环.这个和 @for 指令很相似,只要 @while 后面的条件为 ...