正则表单验证
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <input type="text" id="user" autocomplete="off"> <span id="userSpan">用户名由字母数字下划线组成的6-12位,数字不能开头</span> <br> <input type="text" id="pwd" autocomplete="off"> <span id="pwdrSpan">强弱判断</span> <script> $('#user').onblur = function () { var useval = this.value //空 任意字符出现0次 if (/^.{0}$/.test(useval)) { errMsg($('#userSpan'), '输入不能为空', 'red') return } //长度为6到12位 if (!(/^.{6,12}$/.test(useval))) { errMsg($('#userSpan'), '长度不对', 'red') return } //数字不能开头 if (/^\d/.test(useval)) { errMsg($('#userSpan'), '数字不能开头', 'red'); return } if (/\W/.test(useval)) { errMsg($('#userSpan'), '不能有非法字符', 'red'); return } errMsg($('#userSpan'), '√', 'green'); } function errMsg(ele, msg, color) { ele.innerHTML = msg ele.style.color = color } function $(e) { return document.querySelector(e) } </script> </body> </html>