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 设置或返回id value 设置或返回文本域的值
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>