Question

我想编写自己的JQUERY表单验证脚本，而不是使用JQUERY validate插件。我仍然是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

});

Answer 1

您有2个错误。修复它们，你的脚本就可以了。

错误＃1 代码：

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

必须是

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

了解逻辑&&和按位&运算符here之间的区别。

错误＃2 。电子邮件regexp不正确，应该只是：

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

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

Answer 2

除了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/

Jquery表单验证脚本

2 个答案: