用jquery做表单验证

来源:互联网 发布:主流网管软件都有啥 编辑:程序博客网 时间:2024/06/08 06:13

下面是整个jquery验证的代码:

$(function() {var flag = true;//判断是否通过验证的标识var regex = new RegExp(/^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/);//emial正则验证表达式var message = "emial 格式不正确";var rnick = new RegExp(/\w{6,}/);//昵称正则验证表达式var mnick = "昵称不能少于六个字母";var rpwd = new RegExp(/\w{6,}/);//密码正则验证表达式var mpwd = "密码不能少于六位数";$("#registerBtn").click(function() {//提交按钮注册点击事件    verification($("#email"), regex, message, $("#email_prompt"));//emial验证    verification($("#nickName"), rnick, mnick, $("#nickName_prompt"));//昵称验证    verification($("#pwd"), rpwd, mpwd, $("#pwd_prompt"));//密码验证        var f = false;//密碼重複驗證        var value = $("#repwd").val();        $("#pwd").val() && value != null ? f = true : f = false;        var data = "两次输入密码不一致";        if (f == false) {            $("#repwd_prompt").html(data);            $("#repwd_prompt").css("color", "red");            flag = false;        } else {            flag = true;        }        $("#repwd").focus(function() {            $("#repwd_prompt").hide();        });return flag;});function verification(n, regex, message, m) {//驗證函數 n传入选定的输入框的元素 regex传入正则表达式 message表示    //显示在输入框后的提示信息 m表示提示框    var value = n.val();    if (!regex.test(value)) {        m.html(message);        m.css("color", "red");        flag = false;    } else {        flag = true;    }    n.focus(function() {//当重新获得焦点输入时隐藏提示        m.hide();    });}

});
表单验证运行后的效果

原创粉丝点击