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

时间：2015-11-02 10:01:55

标签： 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 个答案:

答案 0 :(得分：1)

<!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>

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

相关问题
最新问题