在 jquery 第一步 js 验证电子邮件和名称验证
On jquery first step js validate email and name validation
我有 5 个字段，我想在第一步和所有其他步骤中验证电子邮件和姓名，每一步用户都用 3 位数字验证字段。
只有第一步它会验证电子邮件和姓名，以及其他 3 位数字验证的度量。
我指的是 How to validate an email address in JavaScript 这个问题，我只想在第一步验证姓名电子邮件。
我做错了什么。
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return ValidateField('measurename' + currentIndex);
return ValidateField('measuremail' + currentIndex);
return ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function ValidateField(classNameOfField) {
if(/^[a-zA-Z\s]+$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
代码中有 2 个错误。
在 HTML 代码中，您将 className 作为 measurename 作为 measureemail，而您的 JS 正在附加 currentIndex。
您使用相同的函数来验证名称、电子邮件、输入，您需要将其分开并检查是否有任何函数返回 false。
下面是工作代码，请检查。
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput4" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
</body>
JS:
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return validateName('measurename') & validateEmail('measureemail') & ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function validateName(classNameOfField) {
if($("."+ classNameOfField).val() !== "" && /^[a-zA-Z\s]+$/.test($("."+ classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
}
function validateEmail(classNameOfField) {
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ classNameOfField).val())){
return true;
}
else{
console.log("Wrong")
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
}
function ValidateField(classNameOfField) {
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
return true;
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});
我有 5 个字段，我想在第一步和所有其他步骤中验证电子邮件和姓名，每一步用户都用 3 位数字验证字段。
只有第一步它会验证电子邮件和姓名，以及其他 3 位数字验证的度量。
我指的是 How to validate an email address in JavaScript 这个问题，我只想在第一步验证姓名电子邮件。 我做错了什么。
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return ValidateField('measurename' + currentIndex);
return ValidateField('measuremail' + currentIndex);
return ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function ValidateField(classNameOfField) {
if(/^[a-zA-Z\s]+$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ + classNameOfField).val())){
return true;
}
else{
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput0" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
代码中有 2 个错误。
在 HTML 代码中，您将 className 作为 measurename 作为 measureemail，而您的 JS 正在附加 currentIndex。
您使用相同的函数来验证名称、电子邮件、输入，您需要将其分开并检查是否有任何函数返回 false。
下面是工作代码，请检查。
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-steps/1.1.0/jquery.steps.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<body>
<form id="form" name="form" method="post" action="mail/men-measure.php" class="measureinput-inner">
<div class="content">
<div id="wizard">
<h2>Personal Detail</h2>
<section class="tabs-continners">
<input type="name" class="measurename" placeholder="Enter Name" id="acrossfront" name="across-front">
<input type="email" class="measureemail" placeholder="Enter Email" id="acrossfront" name="email">
</section>
<h2>Across Front</h2>
<section class="tabs-continners">
<input type="text" class="measureinput1" placeholder="Enter Measurement In cm" id="acrossfront" name="across-front">
</section>
<h2>Across Back</h2>
<section class="tabs-continners">
<input type="text" class="measureinput2" placeholder="Enter Measurement in cm" id="across-back" name="across-back">
</section>
<h2>Bundi Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput3" placeholder="Enter Measurement in cm" id="bundi-length" name="bundi-length">
</section>
<h2>Bandhgala Length</h2>
<section class="tabs-continners">
<input type="text" class="measureinput4" placeholder="Enter Measurement In cm" id="bandhgala-length" name="bandhgala-length" required>
</section>
<span id="errorMessage" style="display:none;color:red;"> Maximum 3 digits are allowed</span>
</div>
</div>
</form>
</body>
JS:
$(function() {
$("#wizard").steps({
headerTag: "h2",
bodyTag: "section",
transitionEffect: "slideLeft",
stepsOrientation: "vertical",
enableKeyNavigation: true,
onStepChanging: function(event, currentIndex, newIndex) {
// always clear error message on click of 'next' and 'previous'
clearErrorMessage('measureinput' + currentIndex);
// in case of 'next', newIndex is greater than currentIndex
// so below condition will validate only in case of 'next', not 'previous'
if (currentIndex < newIndex) {
return validateName('measurename') & validateEmail('measureemail') & ValidateField('measureinput' + currentIndex);
}
else {
return true;
}
},
onFinishing: function(event, currentIndex) {
return ValidateField('measureinput' + currentIndex);
},
onFinished: function(event, currentIndex) {
$("#form")[0].submit();
}
});
function validateName(classNameOfField) {
if($("."+ classNameOfField).val() !== "" && /^[a-zA-Z\s]+$/.test($("."+ classNameOfField).val())){
return true;
}
else{
alert('Enter Name'); // you can write your own logic to warn users
return false;
}
}
function validateEmail(classNameOfField) {
if(/^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/.test($("."+ classNameOfField).val())){
return true;
}
else{
console.log("Wrong")
alert('Enter Email!'); // you can write your own logic to warn users
return false;
}
}
function ValidateField(classNameOfField) {
var allFields = $("." + classNameOfField);
for (i = 0; i < allFields.length; i++) {
if (/^[0-9]{1,3}$/.test(allFields[i].value)) {
return true;
} else {
//alert('Max 3 digits are allowed!'); // you can write your own logic to warn users
showErrorMessage(classNameOfField);
return false;
}
}
return true;
}
function showErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "red");
$("#errorMessage").css("display", "block");
}
function clearErrorMessage(classNameOfField)
{
$("."+classNameOfField).css("border-color", "black");
$("#errorMessage").css("display", "none");
}
});