<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. SQL Server增量备份数据[转]

    服务器中一个数据库DB,其中表A有几个地方要写入的,程序设定在网络不通的时候也可以用本机的数据库运行,在网络通达后,再将本机的数据写回到服务器中,经研究,增量备份有以下几种可能性: 1.        ...

  2. INPUT输入子系统——按键

    一.什么是input输入子系统? 1.1. Linux系统支持的输入设备繁多,例如键盘.鼠标.触摸屏.手柄或者是一些输入设备像体感输入等等,Linux系统是如何管理如此之多的不同类型.不同原理.不同的 ...

  3. java 企业网站源码模版 屏幕自适应 有前后台 springmvc SSM 生成静态化引擎

    前台: 支持四套模版, 可以在后台切换 系统介绍: 1.网站后台采用主流的 SSM 框架 jsp JSTL,网站后台采用freemaker静态化模版引擎生成html 2.因为是生成的html,所以访问 ...

  4. vue-fiters过滤器的使用

    1.定义过滤器 2.使用过滤器 ...... <el-table-column prop="user_gender" align="center" lab ...

  5. tomcat闪屏是jdk JAVA_HOEM环境变量配置问题

    JAVA_HOME=D:\jdk.18

  6. Jquery Ajax简单封装(集中错误、请求loading处理)

    Jquery Ajax简单封装(集中错误.请求loading处理) 对Jquery Ajax做了简单封装,错误处理,请求loading等,运用到项目中集中处理会很方便. 技术层面没有什么好说的,请求是 ...

  7. 第三讲JdbcRealm及Authentication Strategy

    1.使用shiro框架来完成认证工作,默认情况下使用的是IniRealm.如果需要使用其他Realm,那么需要进行相关的配置. 2.ini配置文件讲解: [main] section是你配置应用程序的 ...

  8. 2019-8-31-dotnet-core-集成到-Mattermost-聊天工具

    title author date CreateTime categories dotnet core 集成到 Mattermost 聊天工具 lindexi 2019-08-31 16:55:58 ...

  9. openprocess提升为测试权限

    BOOL EnableDebugPrivilege() { HANDLE hToken; BOOL fOk=FALSE; if(OpenProcessToken(GetCurrentProcess() ...

  10. 前端每日实战：37# 视频演示如何把握好 transition 和 animation 的时序，创作描边按钮特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/mKdzZM 可交互视频教程 此视频 ...