1

我想编写自己的 JQUERY 表单验证脚本，而不是使用 JQUERY 验证插件。我对 JQUERY 还比较陌生，所以我的脚本可能不是最精简的。

我编写了以下脚本，它似乎根本不起作用，但从我的研究和阅读来看，一切似乎都还可以。

所以如果有人有时间用专业的眼光看一下下面的脚本，看看我是否在做一些愚蠢的事情

干杯

$(document).ready(function(){

var form = $("#SignupForm");
var email1 = $("#email1");
var email2 = $("#email2");
var firstname = $("#firstname");
var surname = $("#surname");


var firstname_valid_prompt = $("#firstname_valid_prompt");
var firstname_correct_image = $("#firstname_correct_image");
var surname_valid_prompt = $("#surname_valid_prompt");
var surname_correct_image = $("#surname_correct_image");
var email1_valid_prompt = $("#email1_valid_prompt");
var email1_correct_image = $("#email1_correct_image");
var email2_valid_prompt = $("#email2_valid_prompt");
var email2_correct_image = $("#email2_correct_image");



var lettersReg = /^([a-zA-Z,-]|\s)*$/;
var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i.test(f.val()) && !/[\(\)\<\>\,\;\:\\\"\[\]]/;



email1.keyup(validateEmail1);
email2.keyup(validateEmail2);
firstname.keyup(validateFirstname);
surname.keyup(validateSurname);




form.submit(function(){
    if (validateEmail1() & validateEmail2() & validateFirstname() & validateSurname()){
    return true ;
    }       
    else {
    return false;   
    }

});

function validateEmail1(){
    if (email1.val().length == 0){
    email1.addClass("error");
    email1_valid_prompt.removeClass("correct");
    email1_valid_prompt.text("You Must Enter Your E-mail Address");
    email1_correct_image.removeClass("correct");
    email1_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!emailReg.test(email1.val())) {
        email1.addClass("error");
        email1_valid_prompt.removeClass("correct");
        email1_valid_prompt.text("Please Enter a Valid E-mail Address");
        email1_correct_image.removeClass("correct");
        email1_valid_prompt.addClass("error");
        return false;
        }
        else {
        email1.removeClass("error");    
        email1_valid_prompt.text("");
        email1_correct_image.addClass("correct");
        email1_valid_prompt.removeClass("error");
        return true;
        }
    }
} // Email Function End

function validateEmail2(){
    if (email2.val().length == 0){
    email2.addClass("error");
    email2_valid_prompt.removeClass("correct");
    email2_valid_prompt.text("You Must Confirm Your E-mail Address");
    email2_correct_image.removeClass("correct");
    email2_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!emailReg.test(email2.val())) {
        email2.addClass("error");
        email2_valid_prompt.removeClass("correct");
        email2_valid_prompt.text("Please Enter a Valid E-mail Address");
        email2_correct_image.removeClass("correct");
        email2_valid_prompt.addClass("error");
        return false;   
        }
        else{
            if($("#email1").val() != $("#email2").val()){
            email2.addClass("error");
            email2_valid_prompt.removeClass("correct");
            email2_valid_prompt.text("Your E-mail Addresses Do Not Match");
            email2_correct_image.removeClass("correct");
            email2_valid_prompt.addClass("error");
            return false;   
            }
            else {
            email2.removeClass("error");    
            email2_valid_prompt.text("");
            email2_correct_image.addClass("correct");
            email2_valid_prompt.removeClass("error");
            return true;
            }
            }
        }
} // Email 2 Function End



function validateFirstname(){
    if (firstname.val().length == 0){
    firstname.addClass("error");
    firstname_valid_prompt.removeClass("correct");
    firstname_valid_prompt.text("You Must Enter Your Firstname");
    firstname_correct_image.removeClass("correct");
    firstname_valid_prompt.addClass("error");
    return false;   
    } 
    else{
         if(!lettersReg.test(firstname.val())) {
        firstname.addClass("error");
        firstname_valid_prompt.removeClass("correct");
        firstname_valid_prompt.text("Please Only Use Letters");
        firstname_correct_image.removeClass("correct");
        firstname_valid_prompt.addClass("error");
        return false;   
        }
        else {
        firstname.removeClass("error"); 
        firstname_valid_prompt.text("");
        firstname_correct_image.addClass("correct");
        firstname_valid_prompt.removeClass("error");
        return true;
        }
        }
} // Firstname Function End

function validateSurname(){
    if (surname.val().length == 0){
    surname.addClass("error");
    surname_valid_prompt.removeClass("correct");
    surname_valid_prompt.text("You Must Enter Your Surname");
    surname_correct_image.removeClass("correct");
    surname_valid_prompt.addClass("error");
    return false;   
    } 
    else{
        if(!lettersReg.test(surname.val())) {
        surname.addClass("error");
        surname_valid_prompt.removeClass("correct");
        surname_valid_prompt.text("Please Only Use Letters");
        surname_correct_image.removeClass("correct");
        surname_valid_prompt.addClass("error");
        return false;   
        }
        else {
        surname.removeClass("error");   
        surname_valid_prompt.text("");
        surname_correct_image.addClass("correct");
        surname_valid_prompt.removeClass("error");
        return true;
        }
    }
} // Surname Function End

});
4

2 回答 2

2

您有 2 个错误。修复它们，您的脚本将起作用。

错误 #1代码：

if (validateEmail1() & validateEmail2() & validateFirstname() & validateSurname()) {

一定是

if (validateEmail1() && validateEmail2() && validateFirstname() && validateSurname()) {

在此处阅读逻辑运算符&&和位运算符之间的区别。&

错误 #2。电子邮件正则表达式不正确，应该只是：

var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i;

工作演示：http: //jsfiddle.net/76HYV/

于 2013-03-29T15:22:33.137 回答
0

除了 dfsq 的回答之外，在表单中显示错误消息的一种更有效的方式是通过 jQuery 对象完成的:)

//create an "error message" div, and insert it after the form field
$("<div/>",{
    class: 'errorDiv',
    id: 'errorDiv1'
}).insertAfter("#field1");
$("#errorDiv1").html("an error message");

这样，您不需要为每个字段添加/删除类:)

示例：http: //jsfiddle.net/9BsFH/1/

于 2013-03-31T23:23:39.167 回答