<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. Linux 修改hostname几种方式

    1:  hostname DB-Server          --运行后立即生效(新会话生效),但是在系统重启后会丢失所做的修改 2:  echo DB-Server  > /proc/sys ...

  2. 看漫画就能学SQL，简直太cool了

    对于SQl, 很多人学不会的原因是从一开始就没明白,学这东西能干啥,学会了能有什么用.甚至有些人不知道'SQL'应该怎么读,以至于一开始兴致勃勃,但是学到一半放弃了. 注意:'sql'真的不能读成'烧 ...

  3. 【摘】sizeof实现

    注意sizeof是运算符,而非函数 关于sizeof的两个精巧的宏实现. 非数组的sizeof: #defne _sizeof(T) ( (size_t)((T*)0 + 1)) 数组的sizeof: ...

  4. Linux压缩、解压

    gzip压缩: 归档,压缩,yourFloder文件夹生成yourName.tar.gz: - tar -zcvf yourName.tar.gz yourFloder 解压yourName.tar. ...

  5. 即时通讯(II)

    Socket 连接Demo Socket客户端代码 #import "ViewController.h" //0.导入头文件 #include <netinet/in.h&g ...

  6. 【错误】mysql 出现 "1067 - Invalid default value for 'UPDATE_TIME' " 错误提示的解决办法

    今天工作中遇到修改表结构的时候出现错误 Invalid default value for 'UPDATE_TIME 问题原因是因为db 表中update_time的默认时间写成了 '0000-00- ...

  7. FMC228- 四路16位1.2Gsps DA FMC子卡模块

    FMC228- 四路16位1.2Gsps DA FMC子卡模块 一.概述          FMC连接器是一种高速多pin的互连器件,广泛应用于板卡对接的设备中,特别是在xilinx公司的所有开发板中 ...

  8. Android解决冲突

    1.在app的build.gradle中的defaultConfig节点中配置configurations.all android{ ... defaultConfig { configuration ...

  9. 2018-10-16-weekly

    Algorithm 判断子序列 What 给定字符串 s 和 t ,判断 s 是否为 t 的子序列.如,"ace"是"abcde"的一个子序列,而"a ...

  10. 2019最新create-react-app创建的react中使用sass/scss,以及在react中使用sass/scss公共变量的方法

    Sass(英文全称:Syntactically Awesome Stylesheets)是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言.Sas ...