堆栈内存溢出
  繁体   English   中英

空字段和错误输入的javascript表单验证

[英]javascript form validation for empty field and wrong input

 原文  2015-11-02 10:01:54  5   1    javascript

问题描述

该程序正确运行..我的任务是，当名称字段保留为空时（请输入您的姓名），将生成此错误，并且当我键入错误的输入（如数字）时，则（仅允许字母和空格）此错误消息必须生成。 我怎样才能做到这一点。 

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Validation tutorial</title>
<script>
function validateName(x){
  // Validation rule

  var re = /[A-Za-z -']$/;
  // Check input
  if(re.test(document.getElementById(x).value)){
    // Style green
    document.getElementById(x).style.borderColor ='#3BFF3B';
    // Hide error prompt
    document.getElementById(x + 'Error').style.display = "none";
    return true;
  }else{
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error').style.display = "block";
    return false; 
  }
 }
 // Validate email
function validateEmail(email){ 
  var re = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(re.test(email)){
    document.getElementById('email').style.borderColor ='#3BFF3B';
    document.getElementById('emailError').style.display = "none";
    return true;
  }else{
    document.getElementById('email').style.borderColor ='#FF0000';
    return false;
  }
 }
 // Validate Select boxes
 function validateSelect(x){
  if(document.getElementById(x).selectedIndex !== 0){
    document.getElementById(x).style.borderColor ='#3BFF3B';
    document.getElementById(x + 'Error').style.display = "none";
    return true;
    }else{
    document.getElementById(x).style.borderColor ='#FF0000';
    return false; 
  }
}
function validateRadio(x){
  if(document.getElementById(x).checked){
    return true;
  }else{
    return false;
  }
}
function validateCheckbox(x){
  if(document.getElementById(x).checked){
    return true;
  }
  return false;
}   
function validateForm(){
  // Set error catcher
  var error = 0;
  // Check name
   if(!validateName('name')){
    document.getElementById('nameError').style.display = "block";
    error++;
  }
  // Validate email
  if(!validateEmail(document.getElementById('email').value)){
    document.getElementById('emailError').style.display = "block";
    error++;
  }
  // Validate animal dropdown box
  if(!validateSelect('subject')){
    document.getElementById('subjectError').style.display = "block";
    error++;
  }
  // Validate Radio
  if(validateRadio('male')){

  }else if(validateRadio('female')){

  }else{
    document.getElementById('genderError').style.display = "block";
    error++;
  }

  // Don't submit form if there are errors
  if(error > 0){
    return false;
  }
  }     
  </script>
  </head>
  <body>
  <form action="" onsubmit="return validateForm()">

  <label for="name">Name</label>
  <input type="text" name="name" id="name" onblur="validateName(name)" />
  <span id="nameError" style="display: none;">only alphabates and white space are allowed</span>
    <br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  <span id="emailError" style="display: none;">You must enter a valid email address</span>
<br><br>

  <label for="hand">Gender</label>
  <ul>
    <li>
      <input type="radio" name="gender" id="male" value="male" onblur="validateRadio(id)" />
      <label for="left">male</label>
    </li>
    <li>
      <input type="radio" name="gender" id="female" value="female" onblur="validateRadio(id)" />
      <label for="right">female</label>
    </li>
  </ul>
  <span class="validateError" id="genderError" style="display: none;">Please select gender</span>
<br><br>
 <label for="subject">Favourite Subject</label>
  <select name="subject" id="subject" onblur="validateSelect(name)">
    <option value="">SUBJECTS</option>
    <option value="php">PHP</option>
    <option value="java">JAVA</option>
    <option value="sql">SQL</option>
  </select>
  <span class="validateError" id="subjectError" style="display: none;">You must select your favourite subject</span>
    <br><br>

  <input type="submit" id="submit" name="submit" value="Submit" />

 </form>
 </body>
 </html>

1 个解决方案

解决方案1
 1  2015-11-02 10:54:24

<!doctype html>
   <html lang="en">
   <head>
   <meta charset="utf-8">
<title>Validation tutorial</title>
<script>
function validateName(x){
  // Validation rule

  var re = /[A-Za-z -']$/;
  // Check input
  if(re.test(document.getElementById(x).value)){
    // Style green
    document.getElementById(x).style.borderColor ='#3BFF3B';
    // Hide error prompt
    document.getElementById(x + 'Error').style.display = "none";
    return true;
  }else if(document.getElementById(x).value === ''){
    //This is for an empty string or if name was not entered.
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error2').style.display = "block";
    return false; 
   }else{
    // Style red
    document.getElementById(x).style.borderColor ='#FF0000';
    // Show error prompt
     document.getElementById(x + 'Error').style.display = "block";
    return false; 
  }
 }
 // Validate email
function validateEmail(email){ 
  var re = /^([a-zA-Z0-9_.+-])+\@(([a-zA-Z0-9-])+\.)+([a-zA-Z0-9]{2,4})+$/;
  if(re.test(email)){
    document.getElementById('email').style.borderColor ='#3BFF3B';
    document.getElementById('emailError').style.display = "none";
    return true;
  }else{
    document.getElementById('email').style.borderColor ='#FF0000';
    return false;
  }
 }
 // Validate Select boxes
 function validateSelect(x){
  if(document.getElementById(x).selectedIndex !== 0){
    document.getElementById(x).style.borderColor ='#3BFF3B';
    document.getElementById(x + 'Error').style.display = "none";
    return true;
    }else{
    document.getElementById(x).style.borderColor ='#FF0000';
    return false; 
  }
}
function validateRadio(x){
  if(document.getElementById(x).checked){
    return true;
  }else{
    return false;
  }
}
function validateCheckbox(x){
  if(document.getElementById(x).checked){
    return true;
  }
  return false;
}   
function validateForm(){
  // Set error catcher
  var error = 0;
  // Check name
   if(!validateName('name')){
    document.getElementById('nameError').style.display = "block";
    error++;
  }
  // Validate email
  if(!validateEmail(document.getElementById('email').value)){
    document.getElementById('emailError').style.display = "block";
    error++;
  }
  // Validate animal dropdown box
  if(!validateSelect('subject')){
    document.getElementById('subjectError').style.display = "block";
    error++;
  }
  // Validate Radio
  if(validateRadio('male')){

  }else if(validateRadio('female')){

  }else{
    document.getElementById('genderError').style.display = "block";
    error++;
  }

  // Don't submit form if there are errors
  if(error > 0){
    return false;
  }
  }     
  </script>
  </head>
  <body>
  <form action="" onsubmit="return validateForm()">

  <label for="name">Name</label>
  <input type="text" name="name" id="name" onblur="validateName(name)" />
  <span id="nameError" style="display: none;">only alphabates and white    space are allowed</span>
 <span id="nameError2" style="display: none;">please enter a name</span>
    <br><br>
  <label for="email">Email</label>
  <input type="text" name="email" id="email" onblur="validateEmail(value)" />
  <span id="emailError" style="display: none;">You must enter a valid email address</span>
<br><br>

  <label for="hand">Gender</label>
  <ul>
    <li>
      <input type="radio" name="gender" id="male" value="male" onblur="validateRadio(id)" />
      <label for="left">male</label>
    </li>
    <li>
      <input type="radio" name="gender" id="female" value="female" onblur="validateRadio(id)" />
      <label for="right">female</label>
    </li>
  </ul>
  <span class="validateError" id="genderError" style="display: none;">Please select gender</span>
<br><br>
 <label for="subject">Favourite Subject</label>
  <select name="subject" id="subject" onblur="validateSelect(name)">
    <option value="">SUBJECTS</option>
    <option value="php">PHP</option>
    <option value="java">JAVA</option>
    <option value="sql">SQL</option>
  </select>
  <span class="validateError" id="subjectError" style="display: none;">You must select your favourite subject</span>
    <br><br>

  <input type="submit" id="submit" name="submit" value="Submit" />

 </form>
 </body>
 </html>

有更好的方法可以做到这一点。 这不是一个优雅的方法。 我看到此代码来自示例或教程。 请检查有关此主题的其他教程，因为这只是实现所需内容的快速方法。

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 空输入字段的 JavaScript 验证 Javascript 无法提交带有空字段验证的表单 javascript空字段表单验证不起作用 表单验证导致表单字段中的数据库输入错误 表单字段验证-JavaScript-空字段 javascript空字段验证 Javascript表单验证部分检查空数据字段是否工作 JavaScript输入字段验证 JavaScript 中的输入字段验证 使用 Vanilla JavaScript 对空和无效 email 进行表单验证（多输入类型）
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM