我正在尝试使用javascript验证表单内的某些输入,然后通过POST将其发送到PHP控制器。
JS代码如下所示,验证手机号码,电子邮件和密码:
function registerUser(){
// Validate Email
event.preventDefault();
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
function validate()
{
var email = document.getElementById("emailReg").val();
if (validateEmail(email))
{
var celular = document.getElementById("cellReg").val();
if(celular.lenght >= 10 && /[0-9]/.test(celular))
{
var pass = document.getElementById("passwordReg").val();
if(pass.length >= 6 && /[a-zA-Z]/.test(pass))
{
alert("correct data");
document.forms['registerForm'].submit();
}
else
{
// document.forms['registroForm'].submit();
event.preventDefault();
alert("password need to has at leas 6 characters and one uppercase");
}
}
else
{
event.preventDefault();
alert("Phone number must not have letters");
}
}
else
{
event.preventDefault();
alert("Incorrect e-mail");
}
return false;
}
}
这是表格:
<form class="form row" method="POST" name="registerForm">
<input type="email" class="form-reg" name="emailReg" id="emailReg" placeholder="example@email.com" style="width:140px;" required>
<input type="text" class="formulario-registro" name="cellReg" id="cellReg" placeholder="cellphone number" style="width: 130px;" required>
<input type="password" class="formulario-registro" name="passwordRegistro" id="passwordRegistro" placeholder="contraseña" style="width: 140px;" required>
<button type="button" class="btn btn-round btn-qubit title" onclick="registroUser();">Registrarme</button>
</form>
我必须检查长度,并且密码是否至少有一个大写字母,如果我写的是 type =“ number” ,则手机号码只有数字和至少10个字符输入标签中的属性将显示带有我不想显示的向上和向下箭头,我可以将条件放入我的php中,但是那样的话,当我提交它时表格将被删除,这就是我所不希望的要做。
答案 0 :(得分:0)
针对此问题使用以下CSS
如果我在输入标签中输入type =“ number”属性,它将显示带有我不想显示的向上和向下箭头
/* Hide Up and Down arrows. */
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type="number"] {
-moz-appearance: textfield;
}
答案 1 :(得分:0)
我在表单上应用函数 ……在提交以下JS代码时,请验证条件是否正确,然后将其发送到php控制器。
$(document).ready(function(){
$(".registerForm").on('submit', function(event)
{
var validate = validate();
if(validate === "success")
{
console.log("success");
document.forms['registerForm'].submit();
}
else{
event.preventDefault();
}
});
// validate password //
function validate()
{
var email = $("#emailRegister").val();
if (validateEmail(email))
{
var cell = $("#cellRegister").val();
if(cell.length === 10)
{
var pass = $("#passwordRegister").val();
if(pass.length >= 6 && /[A-Z]/.test(pass))
{
console.log("correct data");
return "success";
}
else
{
alert("password must have a lenght of 6 digits and at least one capital letter");
return "false";
}
}
else
{
alert("cellphone must be minimum a 10 digits number");
return "false";
}
}
else
{
alert("incorrect e/mail adress");
return "false";
}
}
// Validate Email
function validateEmail(email) {
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
});