【发布时间】：2014-12-16 12:39:53
【问题描述】：
我编写了一个 html 表单和 jquery 来执行验证。但是当我点击提交按钮时，什么都没有发生。我不明白发生了什么，表单是否与 jquery 文件链接。请检查我的代码并帮助我。
index.html
<html>
<head>
<title>validation</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>
<body>
<form action="" method="post" id="reg_form">
<p>Name:</p>
<p><input id="name" name="name" type="text"></p>
<p>What's your name?</p>
<p>Email:</p>
<p><input id="email" name="email" type="text"></p>
<p>Enter mail id</p>
<p>Password:</p>
<p><input id="pass1" name="pass1" type="password"></p>
<p>More than 8 characters</p>
<p>Password:</p>
<p><input id="pass2" name="pass2" type="password"></p>
<p>same as above</p>
<p>phone</p>
<p><input id="phone" name="phone" type="text"></p>
<p>What's your number?</p>
<input id="submit" name="submit" type="submit" value="submit"/>
</form>
</body>
</html>
custom.js
$(document).ready(function(){
var form = $("#reg_form");
var name = $("#name");
var nameDetails = $("#nameDetails");
var email = $("#email");
var emailDetails = $("#emailDetails");
var pass1 = $("#pass1");
var pass2 = $("#pass2");
var pass1Details = $("#pass1Details");
var pass2Details = $("#pass2Details");
var phone = $("#phone");
var phoneDetails = $("#phoneDetails");
var button = $("#submit");
name.blur(validateName);
email.blur(validateEmail);
pass1.blur(validatePass1);
pass2.blur(validatePass2);
phone.blur(validatePhone);
name.keyup(validateName);
email.keyup(validateEmail);
pass1.keyup(validatePass1);
pass2.keyup(validatePass2);
phone.keyup(validatePhone);
form.submit(function(){
if(validateName() & validateEmail & validatePass1 & validatePass2() & validatePhone()){
return true;
}else{
return false;
}
});
function validateName(){
if(name.val().length<5){
name.addClass("error");
nameDetails.text("Your name should have atleast 5 characters");
nameInfo.addClass("error");
return false;
}else{
name.removeClass("error");
nameDetails.text("Whats your name?");
}
}
function validateEmail(){
var a = $("#email").val();
var regexp = /^[a-zA-Z0-9]+[a-zA-Z0-9_.-]+[a-za-zA-Z0-9_-]+@[a-zA-Z0-9]+[a-zA-Z0-9.-]+[a-zA-Z0-9]+.[a-z]{2,4}$/;
if(filter.text(a)){
email.removeClass("error");
emailDetails.text("Enter mail id");
emailDetails.removeClass("error");
return true;
}else{
email.addClass("error");
emailDetails.text("Enter valid mail id");
emailDetails.addClass("error");
}
}
function validatePass1(){
if(pass1.val().length<8){
pass1.addClass("error");
pass1Details.text("8 characters or more");
pass1Details.addClass("error");
return false;
}else{
pass1.removeClass("error");
pass1.Details.text("Enter mail id");
pass1.Details.removeClass("error");
return true;
}
}
function validatePass2(){
if(pass2.val().length < 1){
pass2.addClass("error");
pass2Details.text("8 characters or more");
pass2Details.addClass("error");
return false;
}
if(pass1.val()!== pass2.val()){
pass2.addClass("error");
pass2Details.text("8 characters or more");
pass2Details.addClass("error");
return false;
}else{
pass2.removeClass("error");
pass2.Details.text("Same as above");
pass2.Details.removeClass("error");
return true;
}
}
function validatePhone(){
var b = $("#phone").val();
var regexp = /[0-9]{10}/;
if(filter.text(b)){
email.removeClass("error");
emailDetails.text("Enter phone number");
emailDetails.removeClass("error");
return true;
}else{
email.addClass("error");
emailDetails.text("Enter valid phone number");
emailDetails.addClass("error");
}
}
});
【问题讨论】：
-
我会查看您的 devtool 控制台，我希望您会看到一些错误来为您指明正确的方向
-
validateEmail & validatePass1你不认为这需要()。 -
好的。我纠正了这一点。但它仍然无法正常工作
-
在 chrome 中运行页面并在 chrome 控制台中调试，检查断点是否被命中或控制台是否显示任何错误。要打开开发人员工具，只需按 F12，转到源选项卡并选择要调试的 js 文件。
-
另外尝试放警报检查是否调用了验证方法，我也可以看到一些验证方法不返回true。
标签： php jquery html validation