使用javascript和BootstrapDialog進行表單驗證
[英]Form validation using javascript and BootstrapDialog
問題描述
我正在嘗試使用javascript進行表單驗證，但是，我認為name字段存在一些問題。
每當我為name字段輸入任何值時，它將自動跳過其他驗證並將我定向到index.php。
另一種情況是我填寫了除名稱字段以外的所有內容，它將自動跳過其他驗證並將我定向到index.php。
任何幫助將不勝感激！
<!DOCTYPE html>
<html>
<head>
<!-- https://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal
http://nakupanda.github.io/bootstrap3-dialog/
-->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<link href- "css/trying.css" >
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>
<script>
function showError(message) {
BootstrapDialog.show({
title: 'Attention',
message: message,
type: BootstrapDialog.TYPE_DANGER,
buttons: [{
label: 'Ok',
cssClass: 'btn-default',
action: function(dialog) {
dialog.close();
}
}]
});
return false;
}
function validationFunction($msg){
var list = document.createElement('ul');
for(var i = 0; i < $msg.length; i++) {
var item = document.createElement('li');
item.appendChild(document.createTextNode($msg[i]));
list.appendChild(item);
}
showError($msg);
return false;
}
function validateForm(form) {
var RE_NAME = /^[A-Z a-z]+$/;
var RE_EMAIL = /^([a-zA-Z0-9_\-\.]+)@([a-zA-Z0-9_\-\.]+)\.([a-zA-Z]{2,5})$/;
var RE_PASSWORD = /^[\S]{6,20}$/
var errors = [];
var name = form.reg_full_name.value;
var email = form.reg_email.value;
var password = form.reg_password.value;
var confirmPass = form.reg_confirmpass.value;
//Name Validation
if (name == "") {
errors.push("Please enter your full name");
}
else if (!RE_NAME.test(x)){
errors.push( "Please enter valid name");
}
//Email Validation
if (!RE_EMAIL.test(email)){
errors.push("Please enter a valid Email");
}
//Password Validation
if (password =="" || confirmPass =="" ){
errors.push( "Password and Comfirmation Password required");
}
else if (!RE_PASSWORD.test(password)){
errors.push("Please a enter a password 6 - 20 characters in length");
}
else if (password!= confirmPass){
errors.push("Your password and confirmation password do not match");
}
//If more than 1 error
if (errors.length > 1) {
validationFunction(errors);
alert(errors);
return false;
}
}
</script>
</head>
<body>
<form name="myForm" action=""
onsubmit="return validateForm(this)" method="post">
Name: <input type="text" name="reg_full_name"><br><br>
Email: <input type="email" name="reg_email"><br><br>
Password: <input type="password" name="reg_password"><br><br>
Confirm Password: <input type="password" name="reg_confirmpass"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
2 個解決方案
解決方案1
1 2017-07-11 17:28:21
數組“錯誤”沒有填充正確的值。
正確的方法是：
errors.push("Please enter your full name");
然后，您的錯誤數組將獲得一個新條目“請輸入您的全名”，該索引的索引為0。該數組現在的長度也為1。因此，您需要在詢問是否存在多個的地方調整該塊。錯誤至：
if (errors.length > 1)
解決方案2
0 2017-07-11 18:13:34
對不起，大家 我發現了問題。 是我的粗心大意的錯誤，我不小心在此行鍵入了錯誤的變量，這導致了我的整個驗證
！RE_NAME.test（x）
問題解決了。
使用JavaScript進行表單驗證？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.