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 に答える