项目需求：

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

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

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

代码如下：

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