在客户端验证表单

最新推荐文章于 2022-05-19 11:15:33 发布

RuGuo_09

最新推荐文章于 2022-05-19 11:15:33 发布

阅读量579

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/baidu_24024601/article/details/50180751

版权

javascript 专栏收录该内容

12 篇文章 2 订阅

订阅专栏

在客户端验证表单的时候，不能用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" οnfοcus="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;
}