表单验证

最新推荐文章于 2024-04-16 11:57:14 发布

amarsoft_wxzhou

最新推荐文章于 2024-04-16 11:57:14 发布

阅读量375

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/amarsoft_wxzhou/article/details/60608231

版权

JavaScript 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<script>

    function checkForm(){
        var flag = true;

        //1.获取用户名和密码里面输入的内容
        var usernameValue=document.getElementById("username").value;
        var passwordValue=document.getElementById("password").value;

        //alert(usernameValue+"---"+passwordValue);

        //2.校验数据
        if(usernameValue == null || usernameValue== ""){
            //若为空 在span中添加错误信息
            //a.获取span
            var username_msgObj=document.getElementById("username_msg");

            //b.设置错误信息
            //username_msgObj.innerHTML="用户名不能为空";
            username_msgObj.innerHTML="<font color='red'>用户名不能为空</font>";
            //将flag置为false;
            flag=false;
        }else{
            //a.获取span
            var username_msgObj=document.getElementById("username_msg");

            //b.设置错误信息
            username_msgObj.innerHTML="";
        }

        //3.校验密码
        if(passwordValue == null || passwordValue== ""){
            //若为空 在span中添加错误信息
            //a.获取span
            var password_msgObj=document.getElementById("password_msg");

            //b.设置错误信息
            password_msgObj.innerHTML="密码不能为空";
            password_msgObj.style.color="red";

            //将flag置为false;
            flag=false;
        }

        return flag;
    }

    //方式1:
    /*function loseFocus(){
     //1.获取input标签内容
     var usernameValue=document.getElementById("username").value;

     //2,判断值 若不满足 给相应的span设置内容
     if(usernameValue==""){
     document.getElementById("username_msg").innerHTML="用户名不能为空";
     }else{
     document.getElementById("username_msg").innerHTML="";
     }
     }*/


    /*function loseFocus(obj){
     alert(obj.value);
     }*/

    function loseFocus(obj){
       // alert(obj);
        if(obj==""|| obj==null){
            document.getElementById("username_msg").innerHTML="<font color='red''>用户名不能为空 ！ </font>";
        }
        else{
            document.getElementById("username_msg").innerHTML="<font color='red''>用户名不能为空 ！ </font>";

        }

    }


</script>
<body>
<form action="#" method="get" onsubmit="return checkForm()">
    <table width="60%" height="60%"  align="center" bgcolor="#ffffff">
        <tr>
            <td colspan="3">会员注册</td>
        </tr>
        <tr>
            <td width="20%">用户名:</td>
            <td width="40%"><input type="text" name="username" id="username" onblur="loseFocus(this.value)"></td>
            <td width="40%"><span id="username_msg"></span></td>
        </tr>
        <tr>
            <td>密码:</td>
            <td><input type="password" name="password" id="password"></td>
            <td><span id="password_msg"></span></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="repassword" id="repassword"></td>
            <td><span id="repassword_msg"></span></td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="submit" value="注册" />
            </td>
        </tr>
    </table>
</form>
</body>
</html>

amarsoft_wxzhou

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
表单验证

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title></head><script> function checkForm(){ var flag = true; //1.获取用户名和密码里面输入的内容 var usernameValue=docum
复制链接

扫一扫

专栏目录