<html>

     <head>

         <title>验证表单</title>

         <script type="text/javascript">

             function checkname(obj){

                 var name = obj.value;

                 var pattern=/^[a-zA-Z]([a-zA-Z]{2,20})/;

                 if(name.match(pattern)==null){

                     document.getElementById("user").innerHTML="<font color='red'>用户名3-10位字母</font>";

                     return false;

                 }else{

                     document.getElementById("user").innerHTML="<font color='green'>用户名合法</font>";

                     return true;

                 }

             }

             function checkpass1(obj){

                 var pass1 = obj.value;

                 var div = document.getElementById("pass1");

                 if(pass1.length==6){

                     div.innerHTML = "<font color='green'>密码合法</font>"

                 }else{

                     div.innerHTML = "<font color='red'>密码不合法</font>"

                 }    

             }

             function checkpass2(obj){

                 var pass2 = obj.value;

                 var pass1 = document.getElementById("pw1").value;

                 var div = document.getElementById("pass2");

                 if(pass1==pass2){

                     div.innerHTML = "<font color='green'>密码一致</font>"

                 }else{

                     div.innerHTML = "<font color='red'>密码不一致</font>"

                 }

             }

             function sysr(obj){

                 var a = obj.value.length;

                 var b = 100-a;

                 var div = document.getElementById("sysr");

                 if(b>=0){

                     div.innerHTML= "你还可以输入"+b+"个字符";

                 }else{

                     div.innerHTML= "超出限制";

                 }

             }

         </script>

     </head>

     <body>

         <h1 align="center">表单验证</h1>

         <hr/>

         <div align="center">

         <table border="1" cellpadding="5" cellspacing="0" name="mytable">

             <tr>

                 <td>用户名</td>

                 <td><input type="text" id="username" onblur="checkname(this)"></td>

                 <td><div id="user"><font color="red">*<font></div></td>

             </tr>

             <tr>

                 <td>密码</td>

                 <td><input type="password" id="pw1" onblur="checkpass1(this)"></td>

                 <td><div id="pass1"><font color="red">*<font></div></td>

             </tr>

             <tr>

                 <td>确认密码</td>

                 <td><input type="password" id="pw2" onblur="checkpass2(this)"></td>

                 <td><div id="pass2"><font color="red">*<font></div></td>

             </tr>

             <tr>

                 <td colspan="3" align="center">

                     <div id="sysr">标准输入100字</div>

                 </td>

             </tr>

             <tr>

                 <td>自我评价</td>

                 <td><textarea rows="5" cols="21" onkeyup="sysr(this)"></textarea></td>

             </tr>

         </table>

         </div>

     </body>

 </html>

HTML--JS 表单验证的更多相关文章

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

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

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

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

  3. jquery.validation.js 表单验证

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

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

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

  5. angular js 表单验证

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

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

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

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

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

  8. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  9. js表单验证工具包

    常用的js表单验证方法大全 /* 非空校验 : isNull() 是否是数字: isNumber(field) trim函数: trim() lTrim() rTrim() 校验字符串是否为空: ch ...

  10. 一个漂亮的js表单验证页面+验证码

    一个漂亮的js表单验证页面 见图知其意, 主要特性 带密码安全系数的判断 其他的就没有啥啦 嘿嘿嘿 当然,其代码也在Github上 我也准备了一套可以直接Ctrl + v; Ctrl + c 运行的代 ...

随机推荐

  1. 【Vue】通过自定义指令回顾 v-内置指令

    Vue.js 的各种指令(Directives)更加方便我们去数据驱动 DOM,例如 v-bind.v-on.v-model.v-if.v-for.v-once 等内置指令,这些指令的职责就是当表达式 ...

  2. 【数据库运维】数据库（server）的时区设置及世界主要地区的时区

    [时区设置不当会有什么问题] 当进行海外项目运维的时候,常常会遇到时区设置的问题.假设时区设置不当 或者 同样项目的server之间的时区不一致,都会有导致项目的数据异常的风险. 假设数据表的字段使用 ...

  3. 模块管理常规功能自己定义系统的设计与实现(15--进一步完好"省份"模块)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/24737483 "省份"模块的进一步完 ...

  4. 项目常见bug

    Invalid prop: type check failed for prop "disabled". Expected Boolean, got String with val ...

  5. pgtksh -- PostgreSQL Tcl/Tk shell 客户端

    SYNOPSIS pgtksh [filename [argument...]] DESCRIPTION 描述 pgtksh 是一个带有 PostgreSQL 数据库访问函数扩展的 Tcl/Tk sh ...

  6. 07.SUSE Linux 系统本地yum源配置

    SUSE Linux 系统 1.新建本地源存储目录root@suse:mkdir /mnt/SUSE_LOCAL_SOURCE 2.创建zypper本地源root@suse:zypper ar fil ...

  7. Codeforces Round #340 (Div. 2) E. XOR and Favorite Number （莫队）

    题目链接:http://codeforces.com/contest/617/problem/E 题目大意:有n个数和m次查询,每次查询区间[l, r]问满足ai ^ ai+1 ^ ... ^ aj ...

  8. 随笔4 Dictionary<K,V>

    本来说是想介绍一下Hashtable的,但是发现HashMap和Hashtable最开始的不同就是在于HashMap继承了AbstractMap,而Hashtable继承了Dictionary< ...

  9. python3-disc和set

    dict Python内置了字典:dict的支持,dict全称dictionary,在其他语言中也称为map,使用键-值(key-value)存储,具有极快的查找速度. 举个例子,假设要根据同学的名字 ...

  10. 理解Promise (1)

    new Promise 需要传递一个执行器 (函数) 函数有两个参数 resolve reject promise 承诺 默认的状态是pengding 调用 resolve 表示成功 reject 表 ...