jQuery表单验证脚本 [英] Jquery Form Validation Script
本文介绍了jQuery表单验证脚本的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想编写自己的JQUERY表单验证脚本，而不是使用JQUERY validate插件.我对JQUERY还是比较陌生，所以我的脚本可能不是最精简的.
I wanted to write my own JQUERY form validation script instead of using the JQUERY validate plugin. I am still relatively new to JQUERY so my script may not be the most streamline.
我写了以下似乎根本不起作用的脚本，但是从我的研究和阅读来看，一切似乎还可以.
I have written the following script which doesn't seem to work at all, but from what I have researched and read it all seems ok.
因此，如果有人有时间专心看一下下面的脚本，看看我是否在做愚蠢的事情
So if anyone has the time to glance a professional eye on the script below, to see if I am doing something stupid
欢呼
$(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
});
推荐答案
您有2个错误.修复它们，您的脚本将起作用.
You have 2 errors. Fix them and your script will work.
错误#1 代码:
if (validateEmail1() & validateEmail2() & validateFirstname() & validateSurname()) {
必须为
if (validateEmail1() && validateEmail2() && validateFirstname() && validateSurname()) {
在此处了解逻辑&&和按位&运算符之间的区别.
Read about the difference between logical && and bitwise & operators here.
错误#2 .电子邮件正则表达式不正确，应为:
Error #2. Email regexp is not correct and should be just:
var emailReg = /^(\S+@\S+(\.\S+)*\.(\S{2,4}))?$/i;
正在运行的演示: http://jsfiddle.net/76HYV/
这篇关于jQuery表单验证脚本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
