表单验证和事件

1.非空验证

 

<form action="062001.html" method="get">
<input type="text" name="uid" id="uid" onblur="yanzheng()"/>
<span id="tishi"></span>
<br />
<br />
<input type="submit" value="提交" onclick="return check()"/>
<br />
</form>
</body>
<script type="text/java/javascript">
function check(){
    var t=document.getElementById("uid");
    if(t.value==""){
        alert("用户名不能为空");
        return false;
        }
    else{
        return true;
        }
    }
function yanzheng(){
    var t=document.getElementById("uid");
    var s=document.getElementById("tishi");
    if(t.value==""){
        s.innerText="用户名不能为空!";
        s.style.color="red";
        }
    else{
        s.innerText="用户名可以使用!";
        s.style.color="green";
         
        }
    }
</script>

 

2.相等验证

 

<br />
<input type="text" name="pwd1" id="pwd1"/>
<br />
<input type="text" name="pwd2" id="pwd2" onblur="xiangdeng()"/>

function xiangdeng(){
    var p1=document.getElementById("pwd1");
    var p2=document.getElementById("pwd2");
    if(p1.value==p1.value){
        alert("两次输入的密码一样");
        }
    else{
        alert("两次输入的密码不一致");
        }
    }

 

3.范围验证

 

function nianling(){
    var a=document.getElementById("age");
    if(parseInt(a.value)>=18&&parseInt(a.value)<=50){
        alert("OK");
        }
    else{
        alert("年龄超出");
        }
    }

 

4.正则验证

用符号来来描述书写规则：/^正则表达式$/

^ 匹配开头，     $ 匹配结尾        

/^ve/ 以ve开头   /ve$/以 ve结尾

* 代表前面的表达式可以出现n次

+ 代表前面表达式至少出现一次

？ 代表前面表达式最多出现一次

{n} 代表前面表达式确定出现n次

{n,} 表示前面表达式最少出现n次

(n,m) 表示前面表达式最少出现n次，最多出现m次

x|y 代表匹配x或者y

[a,b,c] 代表匹配a,b,c  中的任意一个

[a-z] 代表匹配所有小写字母 中的任意一个

\d 代表任意一个数字

\s 代表任意一个可见字符

\w 代表包括下划线的任意字符

 

 

例子 邮箱

 

function youxiang(){
    var e=document.getElementById("email");
    if(e.value.match(/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)==null){
        alert("邮箱格式不正确");
        }
    else{
        alert("邮箱格式正确")
        }
    }