<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. SpringBoot 整合 MybatisPlus (项目的创建及简单的单表查询)

    添加依赖 <!--mybatis-plus的springboot支持--> <dependency> <groupId>com.baomidou</group ...

  2. Java学习day11-类的成员之三：构造器（构造方法）

    一.构造器(构造方法) 语法格式: 修饰符 类名(参数列表){ 初始化语句: } 构造器的特征: 1.它具有与类相同的名称 2.它不声明返回值类型.(与声明为void不同) 3.不能被static.f ...

  3. [BZOJ4476] [JSOI2015] 送礼物 (01分数规划+ST表)

    [BZOJ4476] [JSOI2015] 送礼物 (01分数规划+ST表) 题面 给出n,k,l,r和序列a,要求从a中选一段连续的区间[i,j]出来,使得M(i,j)-m(i,j)/(j-i+k) ...

  4. Redis 和 MongoDB 的优缺点？？

    MongoDB 和 Redis 都是 NoSQL,采用结构型数据存储.二者在使用场景中,存在一定的区别, 这也主要由于二者在内存映射的处理过程,持久化的处理方法不同.MongoDB 建议集群部署,更多 ...

  5. python编程基础之简单购物车

    #good文件夹内容[ ['Iphone7', 5800], ['Coffee', 30], ['疙瘩汤', 10], ['Python Book', 99], ['Bike', 199], ['Vi ...

  6. [书接上一回]在Oracle Enterprise Linux (v5.7) 中安装DB - (3/4)

    安装p10404530_112030_Linux-x86-64_6of7.zip解压下的example. 修改软件路径,为dbhome_1. 安装好数据,则可以进行快照操作! 删除安装文件. 输入db ...

  7. ORA-00911: invalid character 错误解决

    多数情况如下: 控制面板--系统和安全---系统--高级系统设置--高级--环境变量--系统变量中 变量名:NLS_LANG 变量值:SIMPLIFIED CHINESE_CHINA.ZHS16GBK ...

  8. js url传参，参数加密

    前台 function encode64(input) { var output = ""; var base = new Base64(); var output = base. ...

  9. MYSQL学习笔记——sql语句优化之索引

    上一篇博客讲了可以使用慢查询日志定位耗时sql,使用explain命令查看mysql的执行计划,以及使用profiling工具查看语句执行真正耗时的地方,当定位了耗时之后怎样优化呢?这篇博客会介绍my ...

  10. [APIO2009]抢掠计划（Tarjan，SPFA）

    [APIO2009]抢掠计划 题目描述 Siruseri 城中的道路都是单向的.不同的道路由路口连接.按照法律的规定, 在每个路口都设立了一个 Siruseri 银行的 ATM 取款机.令人奇怪的是, ...