js表单正则验证

onsubmit="return check()"



function check(){



//验证姓名

    var xingming= $("#xingming").val();

    if(xingming == null || xingming == "")

    {

        document.getElementById('xingming').style.border="2px solid red";

        return false;

    } else {

        document.getElementById('xingming').style.border="2px solid #3d3935";

    }

    //验证手机号码

    var dianhua= $("#dianhua").val();

    if(dianhua == null || dianhua == "")

    {

        document.getElementById('dianhua').style.border="2px solid red";

        return false;

    }

    else{

        var re = /^1\d{10}$/;

        if(re.test(dianhua))

            { 


            document.getElementById('dianhua').style.border="2px solid #3d3935";

            }

            else

            {

                document.getElementById('dianhua').style.border="2px solid red";

                $('#dianhua').val("");

                $('#dianhua').attr('placeholder', '请输入正确的手机号码!'); 

                return false;

            }

    }

    //验证邮箱

    var youxiang= $("#youxiang").val();

    if(youxiang == null || youxiang == "")

    {

        document.getElementById('youxiang').style.border="2px solid red";

        return false;

    }

    else{

        var re = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;

        if(re.test(youxiang))

        {

            document.getElementById('youxiang').style.border="2px solid #3d3935";


        }

        else{

            document.getElementById('youxiang').style.border="2px solid red";

                $('#youxiang').val("");

                $('#youxiang').attr('placeholder', '请输入正确的邮箱!'); 

                return false;

        }

    }

    return true;

}


}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • <!--内联式 CSS (层叠样式表) 编辑 层叠样式表(英文全称:Cascading Style Sheets)...
    小小一技术驿站阅读 446评论 0 0
  • [if !supportLists]第一章 [endif]介绍 [if !supportLists]一、[endi...
    海绵宝宝_b8a2阅读 326评论 0 0
  • 1 放大镜实例 页面结构:创建左右两个容器,左边容器中添加一张图片背景图,右边容器中添加一张与背景图成比例放大的图...
    果木山阅读 312评论 0 0
  • 1.1CSS 基础与选择器初识 | CSS 1. CSS 加载方式有几种? CSS样式加载一共有四种方式: 1、行...
    没糖_cristalle阅读 787评论 0 0
  • 页面自动执行(加载)js的几种方法 一、JS方法 1.最简单的调用方式,直接写到html的body标签里面: ...
    色即是猫阅读 325评论 0 0