jquery验证不为空 电子邮箱格式是否正确
jquery验证不为空 电子邮箱格式是否正确
管温饱的老徐 发表于7个月前
jquery验证不为空 电子邮箱格式是否正确
  • 发表于 7个月前
  • 阅读 1
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

   

Jquery代码如下:

<script src="js/jquery-2.1.0.js"></script>
<script type="text/javascript">
    function checkForm() {
        //jQuery取得用户输入的name,age,email值  
        var name = $("#clientname").val();
        var pass = $("#password").val();
        var reg = /\w+[@]{1}\w+[.]\w+/;
        var email = $("#email").val();

        //如果名字为空  
        if (name == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".name_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#clientname").after(
                    "<label class='name_lable'><font>用户名不能为空</font></label>");

        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".name_lable").empty();
        }
        if (pass == "") {
            //假如name后面有lable标签,则清空后面的内容,即清除图中红色字体提示的“用户名不能为空”  
            $(".password_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#password")
                    .after(
                            "<label class='password_lable'><font>密码不能为空</font></label>");
        } else {
            //不为空就清空后面的红色提示,如“用户名不能为空”,使其消失  
            $(".password_lable").empty();
        }
        
        if (reg.test(email)) {
        } else {
            $(".email_lable").empty();
            //接着在类选择器.name后面添加一个lable标签  
            $("#email").after(
                    "<label class='email_lable'><font>email格式不正确</font></label>");
                    return false;
        }

    }
</script>

页面代码如下:

<form name="client_form" action="insert.action" method="get"
        onsubmit="return checkForm()">
        <table>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font> 姓名:
                    </div></td>
                <td><input id="clientname" type="text" name="username" value=""
                    size="30"></td>

            </tr>

            <tr bgcolor="#f5f5f5">
                <td><div>
                        <font>*</font>密码
                    </div></td>
                <td><input type="text" name="password" value="" size="30"
                    id="password"></td>
            </tr>
            <tr bgcolor="#f5f5f5">
                <td><div>电子邮箱</div></td>
                <td><input type="text" name="email" value="" size="30"
                    id="email"></td>
            </tr>
            <tr bgcolor="#f0f0f0">
                <td></td>
                <td colspan="2"><input type="submit" value="提交"> <input
                    type="reset" value="重置"></td>
            </tr>
        </table>
    </form>

    <table>
        <tr bgcolor="#f5f5f5">
            <td bgcolor="#FFFFFF"><em>注意:名称前有*的为必填项</em></td>
        </tr>
    </table>

 

css代码如下:

 

<title>添加客户</title>
<style type="text/css">
table {
    background-color: #CCCCCC;
    border: 1px;
    width: 100%;
}

table tr {
    height: 20px;
}

table tr div {
    text-align: right;
}

td font {
    color: red;
}
</style>

 

 

 

 

 

标签: jQuery 表单验证
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 10
码字总数 1678
×
管温饱的老徐
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: