<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. Buses and People CodeForces 160E 三维偏序+线段树

    Buses and People CodeForces 160E 三维偏序+线段树 题意 给定 N 个三元组 (a,b,c),现有 M 个询问,每个询问给定一个三元组 (a',b',c'),求满足 a ...

  2. AppDomain (转)

    AppDomain是CLR的运行单元,它可以加载Assembly.创建对象以及执行程序.AppDomain是CLR实现代码隔离的基本机制. 每一个AppDomain可以单独运行.停止:每个AppDom ...

  3. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  4. 认知redis

    一.redis是什么? 1.基于key-value的内存No sql 数据库(非关系型数据库) 2.读写性能非常好 二.redisd的数据类型有哪些?特点分别是什么? 1)string 一个键对一个值 ...

  5. Linux下C语言实现ATM取款机，消息队列版本

    链接:https://pan.baidu.com/s/1oBavXBuZul7ZAEBL1eYfRA 提取码:ffhg Mybank ATM取款机实验,消息队列实现本实验用的是Centos71.在服务 ...

  6. spl_autoload_register() 函数实现的自动加载

    和Python用module来区分代码块不同,PHP按照命名空间来区分,开始学PHP的时候一心认定了如果想用 use 关键字来导入(Python的习惯说法)一个类或者函数或者其他对象的话,必须先inc ...

  7. vue的class和style的绑定

    <div class="input-search" :class="{input-search-focus : iscur == 1}"> 在原本有 ...

  8. sed \s

    export m1=`free|cut -d ":" -f2|sed -e "s/^\s\s*//g"|head -2|tail -1|cut -d ' ' - ...

  9. shell脚本--expect自动应答

    expect自动应答  TCL语言 需求1:远程登录到A主机,什么事情也不做 #! /usr/bin/env expect # 开启一个程序 spawn ssh root@192.144.213.11 ...

  10. alert(1) to win 12