验证表单问题引导程序和JavaScript

时间:2018-12-14 18:37:42

标签: javascript forms validation

提前感谢您回答问题。

我的表单(与许多类似的表单一样)的目标是检查

  • 文本字段不为空
  • 密码符合条件(说实话,现在我对其中的任何内容都满意)
  • 电子邮件的文本在“ @”之前,在“ @”之前,在“ @”之后。

根据所有检查是否都可以,显示带有消息的警报。

引导程序:

<form>
    <div class="form-group">
    <label for="exampleTextarea">Course/Lecturer feedback</label>
    <textarea class="form-control" id="textArea" rows="3" placeholder="Please enter your feedback in this field. Your opinion matters and helps us to provide you with better serivce."></textarea>
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Please enter your email address</label>
    <input type="email" class="form-control" id="emailAddress" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Please enter your password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
    <button type="submit" class="btn btn-primary" onclick="submitData()">Submit</button>

</form>

javascript

//comment validation function
function textFieldValidate(textField){
  var txtln = "";
  if (txtln !=="")
  return pattern.test(textField);
}

//email validation function
function isValidEmailAddress(emailAddress) {
    var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
    return pattern.test(emailAddress);
}

//password validation function
// at least one number, one lowercase and one uppercase letter
// at least six characters
function passwordValidate(password){
 var pw = new RegExp (/(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/);
  return pw.test(password);
}

function submitData(){
  //retrieve the values
  if(textFieldValidate(textField) && isValidEmailAddress(emailAddress) && passwordValidate(password)){
    //send post request
    alert("Thank you for your feedback! We have sent this to KGB and you should expect a call any moment now...");
  }else{
    //display error message
    alert("Unfortunately information that you have entered was incorrect, please check the info and and resubmit");
    return;
  }
}

我现在得到的是我的页面刷新,什么也没发生。

1 个答案:

答案 0 :(得分:0)

好的,看起来问题出在html中的id是textArea,而在函数中我称之为textField。

现在...另一个问题是它并没有真正验证任何内容。只是弹出窗口出现了...