javascript常用的表单验证

铮崽困了

已于 2023-05-09 09:13:46 修改

阅读量121

点赞数 2

文章标签： javascript html 前端

于 2023-05-09 09:07:13 首次发布

本文链接：https://blog.csdn.net/qq_71695227/article/details/130572476

版权

表单验证

提交

function onSub(){
    if () {
        alert("提交成功!")
        return true;
    } else{
        alert("提交失败!")
        return false;
    }
}

随机生成

function onId() {
    let id = document.getElementById("id_");
    let span = document.getElementById("id_span");
    let ran = Math.ceil(Math.random()*89999999+10000000);
    id.value = ran;
    if (id.value != null) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

名字

function onName(){
    let value = document.getElementById("name_").value;
    let span = document.getElementById("name_span");
    let ran = /^([\u4e00-\u9fa5]|\w){2,6}$/;
    if (ran.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

密码

function onPaw(){
    let value = document.getElementById("paw").value;
    let span = document.getElementById("paw_span");
    let ran = /^[\w\_]{6,}$/;
    if (ran.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

function onPawTow(){
    let value = document.getElementById("paw").value;
    let valueTow = document.getElementById("pawTow").value;
    let span = document.getElementById("pawTow_span");
    let ran = /^[\w\_]{6,}$/;
    if (ran.test(value)&&value==valueTow) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

手机号

function onTel(){
    let value = document.getElementById("tel").value;
    let span = document.getElementById("tel_span");
    let ran = /^[\d]{11}$/;
    if (ran.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

必须包含…

function onType(){
    let value = document.getElementById("type_").value;
    let span = document.getElementById("type_span");
    let ran = /^((?=.*\b)(?=.*[a-zA-Z])(?=.*\$)(?=.*\_).*){6,}$/;
    if (ran.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{ 
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

价格

function onPrice(){
    let value = document.getElementById("price").value;
    let span = document.getElementById("price_span");
    let ran = /^[1-9][\d]{0,}(\.)[\d]{2}$/;
    if (ran.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

性别

function onSex(){
    let arr = document.getElementsByName("sex");
    let span = document.getElementById("sex_span");
    let count = 0;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
            count++;
        }
    }
    if (count>=1) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

爱好

function onHobby(){
    let arr = document.getElementsByName("hobby");
    let span = document.getElementById("hobby_span");
    let count = 0;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i].checked) {
            count++;
        }
    }
    let all = document.getElementById("all");
    if (count==3) {
        all.checked = true
    } else{
        all.checked = false
    }
    if (count>=2) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

全选反选

function onAll(){
    let all = document.getElementById("all");
    let arr = document.getElementsByName("hobby");
    for (var i = 0; i < arr.length; i++) {
        arr[i].checked = all.checked
    }
    onHobby()
}

function onUnAll(){
    let nuAll = document.getElementById("nuAll");
    let arr = document.getElementsByName("hobby");
    for (var i = 0; i < arr.length; i++) {
        arr[i].checked = !arr[i].checked
    }
    onHobby()
}

省市

var arr = [
    [0,"山东",1],
    [0,"河南",2],
    [1,"菏泽",3],
    [2,"洛阳",4]
]


function onSheng(){
    let str = "<option value='-1'>请选择</option>";
    let sheng = document.getElementById("sheng");
    document.getElementById("shi").innerHTML = str;
    for (var i = 0; i < arr.length; i++) {
        if (arr[i][0]==0) {
            str += "<option value='"+arr[i][2]+"'>"+arr[i][1]+"</option>"
        }
    }
    sheng.innerHTML = str
}

function onShi(value){
    let str = "<option value='-1'>请选择</option>";
    let shi = document.getElementById("shi");
    let sheng = document.getElementById("sheng");
    if (value!=-1) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i][0]==value) {
                str += "<option value='"+arr[i][2]+"'>"+arr[i][1]+"</option>"
            }
        }
    }
    shi.innerHTML = str
}

function onDiQu(){
    let shi = document.getElementById("shi").value;
    let sheng = document.getElementById("sheng").value;
    let span = document.getElementById("diQu_span");
    if (shi!=-1&&sheng!=-1) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }

}

省市区

var  arr = [
    [1,'a省',0],
    [2,'b省',0],
    [3,'a1市',1],
    [4,'a2市',1],
    [5,'b1市',2],
    [6,'b2市',2],
    [7,'a1_1区',3],
    [8,'a1_2区',3],
    [9,'a2_1区',4],
    [10,'a2_2区',4],
    [11,'b1_1区',5],
    [12,'b1_2区',5],
    [13,'b2_1区',6],
    [14,'b2_2区',6]
]

//省
function onSheng(){
    document.getElementById("sheng").innerHTML = "<option value='0'>==请选择==</option>"
    document.getElementById("shi").innerHTML = "<option value='0'>==请选择==</option>"
    document.getElementById("qu").innerHTML = "<option value='0'>==请选择==</option>"
    var sheng = document.getElementById("sheng");
    var str = "<option value='0'>==请选择==</option>";
    for (var i = 0; i < arr.length; i++) {
        if (arr[i][2]==0) {
            str+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>"
        }
    }
    sheng.innerHTML = str
}

//市
function onShi(value){
    var shi = document.getElementById("shi");
    var str = "<option value='0'>==请选择==</option>";
    if (value!=0) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i][2]==value) {
                str+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>"
            }
        }
        document.getElementById("qu").innerHTML = "<option value='0'>==请选择==</option>"
    }else{
        document.getElementById("qu").innerHTML = "<option value='0'>==请选择==</option>"
    }
    shi.innerHTML = str

}
//区
function onQu(value){
    var qu = document.getElementById("qu");
    var str = "<option value='0'>==请选择==</option>";
    if (value!=0) {
        for (var i = 0; i < arr.length; i++) {
            if (arr[i][2]==value) {
                str+="<option value='"+arr[i][0]+"'>"+arr[i][1]+"</option>"
            }
        }
    }
    qu.innerHTML = str
}

//地区
function onDiQu(){
    var sheng = document.getElementById("sheng").value;
    var shi = document.getElementById("shi").value;
    var qu = document.getElementById("qu").value;
    var span = document.getElementById("diQu_span");
    if (sheng != 0 && shi != 0 && qu != 0) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

简介

function onText(){
    let value = document.getElementById("text_").value;
    let span = document.getElementById("text_span");
    let ran = /^(.|\n){0,20}$/;
    let tex = 20-value.length
    if (ran.test(value)&&tex<=20) {
        span.innerHTML = "<font color='aquamarine'>还可输入"+tex+"字</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }

}

图片

function onFile(){
    let value = document.getElementById("file_").value;
    let span  = document.getElementById("file_span");
    let reg  = /(.jpg|.png|.gif)$/;
    if (reg.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

邮箱

function onEmail(){
    let value = document.getElementById("email_").value;
    let span = document.getElementById("email_span");
    let test = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
    if (test.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>";
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>";
        return false;
    }
}

只能输入近一周的日期

//只能输入近一周的日期
function onDate(){
    let value = document.getElementById("date_").value;
    let span = document.getElementById("date_span");
    let date = new Date(value.replaceAll("-","/")).getTime();
    let newDate = new Date();
    newDate = newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()
    newDate = new Date(newDate.replaceAll("-","/")).getTime();
    let number = 7*24*60*60*1000;
    if (newDate-date>=0) {
        if (newDate-date<number) {
            span.innerHTML = "<font color='aquamarine'>√</font>";
            return true;
        } else{
            span.innerHTML = "<font color='red'>×</font>";
            return false;
        }
    } else{
        if (newDate-date>(number*-1)) {
            span.innerHTML = "<font color='aquamarine'>√</font>";
            return true;
        } else{
            span.innerHTML = "<font color='red'>×</font>";
            return false;
        }
    }

}

只能输入近一月的日期

//只能输入近一月的日期
function onDate(){
    let value = document.getElementById("date_").value;
    let span = document.getElementById("date_span");
    let date = new Date(value.replaceAll("-","/")).getTime();
    let newDate = new Date();
    newDate = newDate.getFullYear()+"-"+(newDate.getMonth()+1)+"-"+newDate.getDate()
    newDate = new Date(newDate.replaceAll("-","/")).getTime();
    year = month = new Date().getFullYear();
    month = new Date().getMonth();
    let days = [31,28,31,30,31,30,31,31,30,31,30,31] 
    if ( (year % 4 ===0) && (year % 100 !==0 || year % 400 ===0) ) {
        days[1] = 29
    }
    let number = days[month]*24*60*60*1000;
    if (newDate-date>=0) {
        if (newDate-date<number) {
            span.innerHTML = "<font color='aquamarine'>√</font>";
            return true;
        } else{
            span.innerHTML = "<font color='red'>×</font>";
            return false;
        }
    } else{
        if (newDate-date>(number*-1)) {
            span.innerHTML = "<font color='aquamarine'>√</font>";
            return true;
        } else{
            span.innerHTML = "<font color='red'>×</font>";
            return false;
        }
    }

}

车牌号

function onCarId(){
    let value = document.getElementById("carId").value;
    let span = document.getElementById("carId_span");
    let test = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领][A-HJ-NP-Z][A-HJ-NP-Z0-9]{4,5}[A-HJ-NP-Z0-9挂学警港澳]$/;
    if (test.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        return false;
    }
}

库存加减

<input type="number" name="" id="count" value="0" onblur="onCount()"/>
<input type="button" name="" id="jia" value="加库存" onclick="onJia()"/>
<input type="button" name="" id="jian" value="减库存" onclick="onJian()"/>

function onCount(){
    let value = document.getElementById("count").value;
    let span = document.getElementById("count_span");
    let test = /^[1-9][\d]{0,}$/
    if (value>=0&&test.test(value)) {
        span.innerHTML = "<font color='aquamarine'>√</font>"
        return true;
    } else{
        span.innerHTML = "<font color='red'>×</font>"
        document.getElementById("count").value = 0
        return false;
    }
}

function onJia(){
    let value = document.getElementById("count");
    value.value = Number(value.value)+1
    onCount()
}
function onJian(){
    let value = document.getElementById("count");
    value.value = Number(value.value)-1
    onCount()
}