<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常用表单验证</title>
</head>
<body>
<form id="oForm" action="#" method="post">
<p>用户名:<input type="text" id="userName"><span id="s1"></span></p>
<p>密码:<input type="text" id="psw"><span id="s2"></span></p>
<p>手机号:<input type="text" id="phone"><span id="s3"></span></p>
<p>邮箱:<input type="text" id="mail"><span id="s4"></span></p>
<p>姓名:<input type="text" id="cname"><span id="s5"></span></p>
<p>性别:<input type="radio" name="sex">男<input type="radio" name="sex">女<span id="s6"></span></p>
<p>数字:<input type="text" id="num"><span id="s7"></span></p>
<p><input type="submit" value="提交"></p>
</form>
<script>
function $(id) {
return document.getElementById(id);
}
// 验证用户名 3-6位的字母、数字、下划线
var flagName = null;
$("userName").onblur = function(){
var reg = /^\w{3,6}$/;
if(!reg.test(this.value)) {
$("s1").innerHTML = "用户名不合法";
flagName = false;
}else{
$("s1").innerHTML = "合法";
flagName = true;
}
}
// 验证密码 至少6位
var flagPsw = null;
$("psw").onblur = function(){
var reg = /^.{6,}$/;
if(!reg.test(this.value)){
$("s2").innerHTML = "密码不合法";
flagPsw = false;
}else{
$("s2").innerHTML = "合法";
flagPsw = true;
}
}
// 验证手机号 以1开头的11位数字
var flagPhone = null;
$("phone").onblur = function(){
var reg = /^1\d{10}$/;
if(!reg.test(this.value)){
$("s3").innerHTML = "请输入正确的手机号";
flagPhone = false;
}else{
$("s3").innerHTML = "格式正确";
flagPhone = true;
}
}
// 验证邮箱 用户名:字母、数字、下划线、-、.、不能以.或-开头,不能连续.或-
var flagMail = null;
$("mail").onblur = function(){
var reg = /^\w+([.-]\w+)*@[a-zA-Z0-9]+([-.][a-zA-Z0-9]+)(\.[a-zA-Z0-9])+$/;
if(!reg.test(this.value)){
if(!reg.test(this.value)){
$("s4").innerHTML = "邮箱格式有误";
flagMail = false;
}else{
$("s4").innerHTML = "格式正确";
flagMail = true;
}
}
}
//验证中文姓名 中文汉字、***.***
var flagCname = null;
$("cname").onblur = function(){
var reg = /^[\u4e00-\u9fa5]{2,}(·[\u4e00-\u9fa5]{2,})?$/;
if(!reg.test(this.value)){
$("s5").innerHTML = "姓名格式有误";
flagCname = false;
}else{
$("s5").innerHTML = "格式正确";
flagCname = true;
}
}
// 验证性别
function checkSex(){
var sexy = document.getElementsByName("sex");
for(var i=0; i<sexy.length; i++){
if(sexy[i].checked){
return true;
}
}
$("s6").innerHTML = "请选择性别";
return false;
}
// 验证有效数字 + - 小数点 第一位非0
var flagNum = null;
$("num").onblur = function(){
var reg = /^[+-]?(\d|([1-9]\d+))(\.\d+)?$/;
if(!reg.test(this.value)){
$("s7").innerHTML = "数字无效";
flagNum = false;
}else{
$("s7").innerHTML = "格式正确";
flagNum = true;
}
}
// 为提交按钮绑定事件
$("oForm").onsubmit = function(){
if(flagName && flagPsw && flagPhone && flagMail && flagCname && flagNum && checkSex()){
return true;
}
return false;
}
</script>
</body>
</html>
正则的运用 -- 常用表单验证
最新推荐文章于 2021-03-02 04:13:03 发布