表单验证技术
编程技术 / houtizong 发布于 3年前 84
js最主要的功能就是验证表单,下面是我对表单验证的一些理解,贴出来与大家交流交流 ,数显我们要知道表单验证需要的技术点, String对象,事件,函数
一:String对象;通常是对字符串的操作;
1,String的属性;
字符串.length;表示该字符串的长度; var str= "java"; var len = str.length;
len的结果是4;
2,字符串对象常用的方法;
格式:字符串.方法名();
字符串常用的方法;
toLowerCase() 将字符串转为小写toUpperCase() 将字符串转为大写charAt(index) 返回指定位置的字符indexOf(字符串,index) 查找指定位置的字符在字符串中第一次出现的位置substring(index1,index2) 截取两者之间的内容,包括index1 不包括index2
2,表单验证常用的事件,方法,属性
事件
onblur失去焦点触发onfocus获得焦点时触发onkeypress按键按下时触发onclick 点击时触发
方法;
blur 从文本中移开focus 焦点select 选取文本区域内容
属性;
id 设置或返回idvalue 设置或返回文本域的值
3,innerHTML属性;
设置提示信息;
4,DOM对象;
通过标签名查找 HTML 元素
var x=document.getElementById("main");var y=x.getElementsByTagName("p");
5,综合运用上述的技术点做一个简单的表单验证
思路:
a,使用html制作form表格,及内容b,使用dom获取元素c,通过时间触发函数
代码完整实现:正则表达式有些检测不出来
<html><head><style type="text/css">table{width:80%;height:300px;}.float_right{ text-align:right; color:#0000ff; font-size:14px; font-weight:bold;}form div{float:left;position:relative}form input{float:left}</style><script type="text/JavaScript"> //输入框中的提示 function fun_zhuce(element){if(element.value=='全站唯一' || element.value=='正确的邮箱'){element.value='';} } //用户名的验证 function fun_tishiuser(){ //获取输入框的属性 var element = document.getElementById('userName'); //获取文本提示属性 var userinner = document.getElementById('innerclass'); //判断输入框的值是否为null if(element.value==''){ element.value='全站唯一'; userinner.innerHTML="<span style='color:#cc0000'>必须输入账号!!</span>"; }else{ if(element.value.match('\\w{6,12}')){ userinner.innerHTML='账号格式正确!!'; }else{ userinner.innerHTML='账号必须是字母,数字,下划线 6~12位 !!'; } } } //密码验证 function fun_pwd(){ var pwd = document.getElementById("pwd").value; //获取文本提示属性 var innerpwd = document.getElementById('innerpwd'); //判断是否为空 if(pwd==''){ innerpwd.innerHTML="密码不能为空!!"; }else{ if(pwd.match('\\w{6,12}')){ innerpwd.innerHTML="密码格式正确";}else{ innerpwd.innerHTML="密码只能是下划线,字母,数字组成";} } } //密码确认 function fun_pwd2(){ //获取密码和确认密码 var pwd = document.getElementById("pwd").value;var pwd2 = document.getElementById("pwd2").value;//获取文本提示属性 var innerpwd2 = document.getElementById('innerpwd2'); if(pwd==pwd2){ innerpwd2.innerHTML="正确" }else{ innerpwd2.innerHTML="密码不相等" } } //邮箱验证 function fun_email(){var email = document.getElementById("email").value;var inneremail = document.getElementById("inneremail");if(email==''){ inneremail.innerHTML='邮箱不能为空';}else{ if( email.match('[a-zA-Z1-9][\\w]{3,8}\\@[\\w]+\\.[\\w]{2,5}\\.*[\\w]*')){inneremail.innerHTML='邮箱格式正确!!';}else{inneremail.innerHTML='邮箱格式不正确!!';}} } </script></head><body > <form action="secu.html" action="post"><caption><h2>注册</h2></caption><table border=1px color="ff00000" cellspacing="0px" cellpadding="0px" ><tr> <td class="float_right" width=30%>账号:</td> <td> <input type="text" name="userName" id="userName" value="全站唯一" onclick="fun_zhuce(this)" onblur="fun_tishiuser()"> <div id="innerclass"></div> </td> </tr><tr> <td class="float_right" > 密码:</td> <td><input type=""password" name="pwd" id="pwd" onblur="fun_pwd()"> <div id="innerpwd"></div></td></tr><tr> <td class="float_right" >确认密码:</td> <td> <input type=""password" name="pwd2" id="pwd2" onblur="fun_pwd2()"> <div id="innerpwd2"></div> </td></tr><tr> <td class="float_right">邮箱:</td> <td> <input type="text" name="email" id="email" value="正确的邮箱" onclick="fun_zhuce(this)" onblur="fun_email()"> <div id="inneremail"></div> </td></tr><tr><td colspan=2 align="center"><input type="submit" value="提交" /></td></tr></table></form></body></html>
上一篇：js实现图片随鼠标滚动的效果
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
