<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<h1>USER REGISTRATION</h1>
<br>
<form class="for" name="ureg" method="post" action="">
<fieldset style="margin-right: 900px">
<legend>Registration Form</legend>
<pre>
Name <input class="name" type="text"><span id="errmsg5"></span></input><br><br>
User Name <input class="uname" type="text"><span id="errmsg6"></span></input><br><br>
Password <input class="pass" type="password" name="pass"><span id="errmsg7"></span></input><br><br>
Confirm Password <input class="cpass" type="password" name="cpass"><span id="errmsg1"></span></input><br><br>
Email <input type="email"></input><br><br>
Gender <input type="radio" name="gender" value="male">Male</input><input type="radio" name="gender" value="female">Female</input><br><br>
Country <select name="country" style="width: 175px;">
<option value="india">India</option>
<option value="pakistan">Pakistan</option>
<option value="sri lanka">Sri Lanka</option>
<option value="china">China</option>
<option value="china">Japan</option>
<option value="china">Bangladesh</option>
</select><br><br>
Mobile <input class="mob" type="number"><span id="errmsg3"></span></input><br><br>
Age <input class="age" type="number" name="age"><span id="errmsg2"></span></input><br><br>
D.O.B <input type="date"></input><br><br>
Address
<textarea rows="4" cols="50" name="address"></textarea><br><br>
Pincode <input class="pin" type="number"><span id="errmsg4"></span></input><br><br>
<input id="submit" type="submit" value="SUBMIT"> <input id="reset" type="submit" value="RESET">
</pre>
</fieldset>
</form>
<script type="text/javascript">
$(function () {
$(".cpass").change(function () {
var password = $(".pass").val();
var confirmPassword = $(".cpass").val();
if (password != confirmPassword)
{
$("#errmsg1").text(" Password does not match");
return false;
}
else
{
$("#errmsg1").text("");
return true;
}
});
$(".age").change(function () {
$("#errmsg2").text(" ");
var n = $(".age").val();
if (n < 18) {
$("#errmsg2").text( " Age should be > 18");
return false;
}
return true;
});
$(".mob").change(function () {
$("#errmsg3").text( " ");
var mobile = $(".mob").val();
if (mobile.length != 10) {
$("#errmsg3").text( " Not a valid number");
return false;
}
return true;
});
$(".pin").change(function () {
$("#errmsg4").text( " ");
var mobile = $(".pin").val();
if (mobile.length != 6) {
$("#errmsg4").text( " Not a Valid Pincode");
return false;
}
return true;
});
$(".name").change(function () {
$("#errmsg5").text( " ");
var name = $(".name").val();
var pattern = new RegExp("^[A-z]+$");
if (!pattern.test(name)) {
$("#errmsg5").text( " Name should contain only letters");
return false;
}
return true;
});
$(".uname").change(function () {
$("#errmsg6").text( " ");
var uname = $(".uname").val();
var pattern = new RegExp("^[A-z0-9]+$");
if (!pattern.test(uname)) {
$("#errmsg6").text( " User Name should contain only numbers and alphabets");
return false;
}
return true;
});
$(".pass").change(function () {
$("#errmsg7").text(" ");
var pass = $(".pass").val();
if(pass.length>8)
{
var caps = /[A-Z]/.test(pass);
var small = /[a-z]/.test(pass);
var num= /[0-9]/.test(pass);
var sp=/\W|_/.test(pass);
if(caps&&small&&num&&sp)
{
$("#errmsg7").text("");
return true;
}
else
{
$("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
return false;
}
}
else
{
$("#errmsg7").text("Password should be of minimum 8 characters and contain atleast 1 upper case, 1 lower case, 1 digit and 1 special characters");
return false;
}
});
});
</script>
</body>
</html>
这是我验证表单的代码。按下
SUBMIT后，我想再检查一次值。或者，仅当所有条件都满足时，提交才可以工作。有什么办法吗？ 最佳答案
您可以将表单作为目标并检查'submit'事件，如果值不正确，则返回false。或者，您可以使用e.preventDefault();阻止事件上的Default，并使用AJAX提交表单。
编辑：这是我通常做为表单验证的第一遍的简短版本。请注意，这绝对是您应该做的绝对最少的事情。用户可以简单地删除必填属性，并通过您的初次通过验证，因此，您应始终还要检查绝对必填字段，并在清理输入后在服务器端进行检查。 （如图所示，删除不允许的字符，然后检查数据是否正确。）
$('form.validate').on('submit', function(e, el) {
var inputs = $(this).find('input[required]'),
empty = $(inputs).map(function(e, el) {
if (el.value === '') {
return el;
}
});
if (empty.length > 0) {
return false;
}
})