JavaScript验证用户输入的电子邮箱和密码是否合法

要求

1.邮箱地址和密码均不能为空

2.密码不能少于6位

3.邮箱地址必须包含@和.

4.实现文本输入的即时提示效果,即当文本框失去焦点时,如格式不合法,提示原因

5.如果输入的邮箱地址密码均合法,则提交表单

<style type="text/css">
        body{
            font-size: 16px;
        }
        .txt{
            border: 1px solid #ccc;
            width: 160px;
        }
        h1{
            text-align: center;
        }
        #register{
            text-align: center;
        }
</style>
    <h1>验证用户输入的电子邮箱和密码是否合法</h1>
    <div id="register">
        <!-- check()的返回值如果是false,浏览器取消对onsubmit时间的默认处理 -->
        <form action="http://www.baidu.com" onsubmit="return check()">
            <p>
                <label for="">邮箱</label>
                <!-- 失去焦点后,验证格式,如果非法,即时提示 -->
                <input type="text" id="email" class="txt" placeholder="请输入邮箱" value="" onblur="checkEmail()">
                <span id="span-email"></span>
            </p>
            <p>
                <label for="">密码</label>
                <input type="password" id="pwd" class="txt" placeholder="请输入密码" value="" onblur="checkPwd()">
                <span id="span-pwd"></span>
            </p>
            <input type="submit" value="提交">
        </form>
    </div>
<script type="text/javascript">
        function $(id){
            //获取HTML页面中指定id的元素
            return document.getElementById(id);
        }
        function check(){
            if(checkEmail() && checkPwd()){
                return true;
            }
            return false;
        }
        function checkEmail(){
            var email=$("email").value;
            var obj=$("span-email");
            obj.innerHTML="";
            if(email==""){
                obj.innerHTML="Email地址不能为空";
                return false;
            }
            if(email.indexOf("@")==-1){
                obj.innerHTML="Email地址格式不正确,必须包含@";
                return false;
            }
            if(email.indexOf(".")==-1){
                obj.innerHTML="Email地址格式不正确,必须包含.";
                return false;
            }
            return true;
        }
        function checkPwd(){
            var pwd=$("pwd").value;
            var obj=$("span-pwd");
            obj.innerHTML="";
            if(pwd==""){
                //使用innerHTML属性设置<span>标签中的内容
                obj.innerHTML="密码不能为空";
                return false;
            }
            if(pwd.length<6){
                //使用innerHTML属性设置<span>标签中的内容
                obj.innerHTML="密码必须等于或大于6个字符";
                return false;
            }
            return true;
        }
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值