在客户端验证表单

来源：互联网发布：js 最大公约数编辑：程序博客网时间：2024/06/08 04:51

在客户端验证表单的时候，不能用submit按钮阻止默认事件，要阻止表单提交就要在表单上阻止sumint事件；

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>注册页面</title>    <link rel="stylesheet" href="myCss.css">    <script src="base.js"></script></head><body>    <div id="login">        <form id="register" action="#" method="post">            <div class="form-div_1">                 <label class="label_1">用户名:<span>*</span></label>                <input type="text" id="user" name="user" maxlength="25" onfocus="ttt()"/>                <span id="test0"></span>            </div>            <div class="form-div_1">                <label class="label_1">密码:<span>*</span></label>                <input type="password" name="password" id="psw" maxlength="25"/>                <span id="test1"></span>            </div>            <div class="form-div_1">                <label class="label_1">确认密码:<span>*</span></label>                <input type="password"  name="password" id="psw1" maxlength="25"/>                <span id="test2"></span>            </div>            <div>                <label class="label_1">性别:</label>                <input type="radio" name="sex" value="男" id="man"/><label for="man">男</label>                <input type="radio" name="sex" value="女" id="woman"/><label for="woman">女</label>            </div>            <div>                <label class="label_1">职业:</label>                <select name="zhiYe" id="zhiYe">                    <option value="学生">学生</option>                    <option value="职员">职员</option>                    <option value="经理">经理</option>                    <option value="军人">军人</option>                    <option value="自由人">自由人</option>                </select>            </div>            <div>                <label class="label_1">个人爱好:</label>                <input type="checkbox" name="dn"/><span>电脑网络</span>                <input type="checkbox" name="ys"/><span>影视娱乐</span>                <input type="checkbox" name="qp"/><span>棋牌娱乐</span>                <input type="checkbox" name="ds"/><span>读书读报</span>                <input type="checkbox" name="mj"/><span>美酒佳肴</span>                <input type="checkbox" name="hh"/><span>绘画书法</span>            </div>            <div id="textArea">                <label class="label_1" style="float: left;margin-top:80px;">个人说明:</label>                <textarea name="genRenSuoMing" ></textarea>            </div>            <div id="sub_reset">                <input type="submit" value="提交"/>                <input type="reset" value="重置"/>            </div>        </form>    </div></body></html>

/** * Created by wenguang on 2015/12/4. */function checkPassword(){//    var psw=document.getElementById('psw');    var psw1=document.getElementById('psw1');    var test=document.getElementById('test2');    if(psw.value!=psw1.value){        test.innerHTML='两次密码不一致，请重新输入';        return false    }    else        return true;}function checkNotNull(){//判断是否为空    var user=document.getElementById('user');    var psw=document.getElementById('psw');    var psw1=document.getElementById('psw1');    if(user.value=="") {        var span0=document.getElementById('test0');        span0.innerHTML='该项不能为空';        return false;    }    else if(psw.value==""){        var span1=document.getElementById('test1');        span1.innerHTML='该项不能为空';        return false;    }    else if (psw1.value=="") {        var span2=document.getElementById('test2');        span2.innerHTML='该项不能为空';        return false;    }    else  return true;}//绑定事件function addEvent(obj,type,fn){    if(obj.addEventListener){        obj.addEventListener(type,fn,false);    }else if(obj.attachEvent){        obj.attachEvent('on'+type,fn);    }}//跨浏览器阻止默认行为function  preventDefault(evt){    var e=evt||window.event;    if(e.preventDefault){        e.preventDefault();    }else{        e.returnValue=false;    }}addEvent(window,'load',function(){    var fm=document.getElementById('register');    addEvent(fm,'submit',function(evt){        preventDefault(evt);        if(checkNotNull()) {            if (checkPassword()) {//如果两次密码相同则提交                fm.submit();            }        }    });});addEvent(window,'load',function(){//获取焦点是清空提示    var user=document.getElementById('user');    var psw=document.getElementById('psw');    var psw1=document.getElementById('psw1');    addEvent(user,'focus',function(){        var span0=document.getElementById('test0');        span0.innerHTML='';    });    addEvent(psw,'focus',function(){        var span1=document.getElementById('test1');        span1.innerHTML='';    });    addEvent(psw1,'focus',function(){        var span2=document.getElementById('test2');        span2.innerHTML='';    });});

*{    padding:0;    margin: 0;}body{    background: #ccc;    padding: 0;    margin: 0;    color: #fff;    font-family:"微软雅黑 Light";}#login{    width: 700px;    height:auto;    margin: 70px auto;    background:#ddd;}#register div{    width:700px;    height: 30px;    background:#030C1D;    margin: 2px 0;    line-height: 30px;;}.form-div_1 input{    width: 200px;    height: 23px;    margin-bottom:2px;}.label_1{    display: inline-block;    width: 100px;    text-align: right;}.label_1 span{    color: red;}#textArea{    height:180px!important;    line-height: 200px;}#textArea textarea{    display: inline;    width:500px;    height: 160px;    margin: 10px 0;}#sub_reset input{    margin-left: 100px;    width:100px;    height: 25px;    background: #3e3e3e;    color: #fff;    font-size: 20px;}#zhiYe{    width:100px;    height: 23px;}

0 0