input表单验证，正则表达式

最新推荐文章于 2024-02-27 17:07:35 发布

倔强小李

最新推荐文章于 2024-02-27 17:07:35 发布

阅读量502

点赞数

分类专栏： input表单验证文章标签： javascript html

本文链接：https://blog.youkuaiyun.com/love_yourself_ok/article/details/110003999

版权

input表单验证专栏收录该内容

1 篇文章

订阅专栏

这段代码展示了如何使用JavaScript进行前端表单验证，包括检查输入是否为中文、英文、数字、特定字符组合等，并提供了身份证和邮箱格式的验证。通过正则表达式，实现了对用户输入的实时反馈，提示用户输入内容的正确格式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

表单验证


//判断输入的文本是否为中英文
function language(obj) {
    var text = $(obj).val();
    var reg = /^[\u4e00-\u9fa5a-zA-Z]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^\u4e00-\u9fa5a-zA-Z]/g;
        $(obj).after("<span class='tip_text'>请输入中文或英文</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);  //不匹配的输入内容回删
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为中文
function languageChina(obj) {
    var text = $(obj).val();
    var reg = /^[\u4e00-\u9fa5]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^\u4e00-\u9fa5]/g;
        $(obj).after("<span class='tip_text'>请输入中文</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为英文
function languageEnglish(obj) {
    var text = $(obj).val();
    var reg = /^[a-zA-Z]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^a-zA-Z]/g;
        $(obj).after("<span class='tip_text'>请输入英文</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为数字
function languageNumber(obj) {
    var text = $(obj).val();
    var reg = /^[0-9]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^0-9]/g;
        $(obj).after("<span class='tip_text'>请输入数字</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为数字或下划线
function languageNumberLine(obj) {
    var text = $(obj).val();
    var reg = /^[0-9_]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^0-9_]/g;
        $(obj).after("<span class='tip_text'>请输入数字或下划线</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为英文或下划线
function languageEnglishLine(obj) {
    var text = $(obj).val();
    var reg = /^[a-zA-Z_]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^a-zA-Z_]/g;
        $(obj).after("<span class='tip_text'>请输入英文或下划线</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为中文或下划线
function languageChinaLine(obj) {
    var text = $(obj).val();
    var reg = /^[\u4e00-\u9fa5_]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^\u4e00-\u9fa5_]/g;
        $(obj).after("<span class='tip_text'>请输入中文或下划线</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为中英文或下划线
function languageLine(obj) {
    var text = $(obj).val();
    var reg = /^[\u4e00-\u9fa5_a-zA-Z]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^\u4e00-\u9fa5_a-zA-Z]/g;
        $(obj).after("<span class='tip_text'>请输入中文或英文、下划线</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的文本是否为英文或数字
function languageEnglishNum(obj) {
    var text = $(obj).val();
    var reg = /^[a-zA-Z0-9]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^a-zA-Z0-9]/g;
        $(obj).after("<span class='tip_text'>请输入英文或数字</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入的身份证格式
function languageCard(obj) {
    var text = $(obj).val();
    var reg = /(^[1-9]\d{5}(13|14|15|16|17|18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        $(obj).after("<span class='tip_text'>身份证输入的格式错误</span>");
        $(obj).val("");
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}
//判断输入邮箱格是否有中文
function languageEmail(obj) {
    var text = $(obj).val();
    var reg = /^[_a-zA-Z0-9.@]+$/;
    $(obj).nextAll("span.tip_text").remove();
    if(text == "") {
        $(obj).nextAll("span.tip_text").remove();
    }else if(!(reg.test(text))){
        var reg2 = /[^_a-zA-Z0-9.@]/g;
        $(obj).after("<span class='tip_text'>邮箱格不能为中文</span>");
        var text2 = text.replace(reg2,'');
        $(obj).val(text2);
    }else{
        $(obj).nextAll("span.tip_text").remove();
    }
}

html

<input type="text" value=""  onkeyup="language(this)" placeholder="请输入姓名">