使用JavaScript进行表单验证
表单样式:
<form action="" name="form_login">
<input placeholder="账号" type="text" name="username" class="form_input">
<br>
<input placeholder="密码" type="password" name="password" class="form_input" style="top: 230px">
<br>
<input type="submit" name="submit" value="登录" class="_submit" onclick="return _submit()">
<input type="reset" name="reset" value="重置" class="_reset">
</form>
JavaScript代码:
使用正则表达式进行验证,将账号的所有大小写字母和数字使用空符号替代,如果全部替换完毕还有值(length>0)则证明账号中包含除数字和字母外的其他元素。
function _submit(){
var username = document.form_login.username.value;//获取表单元素的值
var password = document.form_login.password.value;
if(username.length < 6 || username.length > 12){
alert("账号的长度必须大于等于6小于等于12");
return false;
}
if(password.length < 6 || password.length > 12){
alert("密码的长度必须大于等于6小于等于12");
return false;
}
username = username.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");//使用正则表达式进行验证,将账号的所有大小写字母和数字使用空符号替代,如果全部替换完毕还有值(length>0)则证明账号中包含除数字和字母外的其他元素。
if(username.length > 0){
alert("账号只能由数字和大小写字母组成");
return false;
}
password = password.replaceAll(new RegExp('[0-9]', 'g'), "").replaceAll(new RegExp('[a-z]', "ig"), "");
if(password.length > 0){
alert("账号只能由数字和大小写字母组成");
return false;
}
return true;
}
使用html5自带的特性进行验证:
required输入,要求提交的值不能为空
<input type="text" name="username" required>
使用 min 和 max 属性来确保数值特定范围内。
(前提是有输入值)
<input type="text" min="6" max="12" name="username" />
或者使用pattern 进行正则表达式验证
<input type="text" id="name" name="name" pattern="^.* .*$" />
参考资料:
https://www.runoob.com/regexp/regexp-syntax.html
https://www.w3cschool.cn/html/html-css-form-input-validation.html