Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态

项目需求：

输入手机号，实时判断手机号输入的是否符合规则：

如果不合规则，则提交按钮为禁用状态，手机号信息不可提交，按钮显示灰色背景；

如果符合规则，则可提交所输入的手机号信息，并将按钮背景设成红色。

代码如下：

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 '标题文档/标题样式.盒子{宽度： 400像素： 50像素自动；border: 1px固体# cccpaddings : 50px } # phone { text-align : center；边距-底部： 20pxborder: 1px固体# ccccolor: # 333}。提交，禁用，# phone { display:块；宽度： 190像素；高度： 35pxborder-半径： 5px左边距左：auto右边距：汽车；} .禁用{ border:无；背景色： # CCCcolor: # fff}。提交{ border:无；背景-颜色：红色；color : # fff }/style/head body div class=' box '输入id='phone '类型=“文本”占位符='输入领券手机号maxlength='11 '按钮id=' submit '类=' disable '禁用确认领取/button /div脚本src=' http : jquery。量滴js /脚本脚本$(function(){ var $ phone=$(' # phone ')；var $ submit=$(' # submit ')；$phone.on('input propertychange '，function(){ var phone=this。价值；if(/^((13[0-9]|15[0-9]|17[0-9]|18[0-9)]\ d { 8 })$/.测试(电话)){ $ submit。移除类(“禁用”).addClass('submit ').移除attr(' disabled ')；} else { $ submit。删除类(“提交”).addClass('disable ').attr('disabled '，' disabled ')；} });});/脚本/正文/html效果：

用户输入的手机号不合规则时：

用户输入的手机号符合规则时：

ps:jquery验证电话号码

var isMobile=/^(？13 \ d | 15 \ d | 18 \ d)\ d { 5 }(\ d { 3 } | \ * { 3 })$/；//手机号码验证规则var isPhone=/^((0\d{2,3})-)？(\d{7，8})(-(\d{3，})？$/;//座机验证规则定义变量华电=$(' #华电')。val()；//获得用户填写的号码值赋值给变量点怀夫(!测试汽车（华电)!isPhone.test(华电))如果用户输入的值不同时满足手机号和座机号的正则警报('请正确填写电话号码，例如：13415764179或0321-4816048');//就弹出提示信息$(' #华电')。焦点();//输入框获得光标返回false//返回一个错误，不向下执行