JS（Javascript）校验表单项的内容是否合规

<script !src="">/*** 分析：* 1.给表单绑定onsubmit事件* 监听器中判断每个方法检验的结果，如果都是true，则监听器方法返回true；如果有一个为false,* 则监听器方法返回false* 2.定义一些方法分别校验各个表单项* 3.给各个表单项绑定onblur事件，失去焦点后触发校验监听器*/window.onload = function () {// 1.给表单绑定onsubmit事件document.getElementById("form").onsubmit = function () {// 调用用户名校验方法，调用密码校验方法等方法return checkUsername() && checkPassword() && checkPhoneNumber() && checkEmail() && checkVerCode();};// 给用户名输入框注册离焦事件监听器document.getElementById("userName").onblur = function () {// 调用校验用户名的方法checkUsername();};// 给密码输入框注册离焦事件监听器document.getElementById("password").onblur = function () {// 调用校验密码的方法checkPassword();};// 给手机号输入框注册离焦事件监听器document.getElementById("phoneNumber").onblur = function () {// 调用校验手机号的方法checkPhoneNumber();}// 给邮箱输入框注册离焦事件监听器document.getElementById("email").onblur = function () {// 调用校验邮箱的方法checkEmail();}// 给验证码输入框绑定离焦事件document.getElementById("verCode").onblur = function () {// 调用校验验证码的方法checkVerCode();}};// 校验用户名function checkUsername() {// 1.获取用户名var userName = document.getElementById("userName").value;// 2.定义正则表达式，匹配6-12个英文字母或数字var regUserName = /^\w{6,12}$/;// 3.判断用户名是否符合正则表达式var flag = regUserName.test(userName);// 4.提示信息if (flag) {// 用户名合规，再查询用户名是否被占用了flag = findUser();} else {// 提示：用户名格式错误document.getElementById("prompt-un").innerHTML = "用户名格式错误！";}return flag;}// 查询用户名是否被占用function findUser() {var userName = $("#userName").val();// alert(userName);$.ajax({"url": "finduser.action?accountName=" + userName,"type": "GET","dateType": "json","success": function (data) {// data是一个js对象，服务端返回的是json字符串，到了前端被构造成一个js对象if (data.ok) {// 返回true，表示没有被占用，可以注册document.getElementById("prompt-un").innerHTML = "<img class='tick' src='image/tick.png'/>";return true;} else {// 返回false，表示已经被占用，不可以注册document.getElementById("prompt-un").innerHTML = "用户名已被占用！";return false;}}});}/*** 校验密码*/function checkPassword() {// 1.获取密码var password = document.getElementById("password").value;// 2.定义正则表达式var regPassword = /^\w{6,12}$/;// 3.判断密码是否符合正则表达式var flag = regPassword.test(password);// 4.提示信息if (flag) {// 符合正则表达式则提示对钩document.getElementById("prompt-pw").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则提示：密码格式错误document.getElementById("prompt-pw").innerHTML = "密码格式错误！";}return flag;}// 校验邮箱function checkEmail() {let flag = true;// 获取邮箱地址let email = document.getElementById("email").value;if (!email) {// 如果邮箱为空，直接返回truereturn flag;}let regEmail = /^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/;flag = regEmail.test(email);if (flag) {// 如果符合正则表达式则显示对钩图标document.getElementById("prompt-email").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 如果不符合正则表达式则显示：邮箱格式错误document.getElementById("prompt-email").innerHTML = "邮箱格式错误";}}// 校验手机号码function checkPhoneNumber() {var flag = true;// 获取手机号码var phoneNumber = document.getElementById("phoneNumber").value;if (!phoneNumber) {// 手机号为空，直接返回truereturn flag;}var regPhoneNumber = /(\+86)?1\d{10}/;flag = regPhoneNumber.test(phoneNumber);if (flag) {// 符合正则表达式则显示对钩document.getElementById("prompt-pn").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 不符合正则表达式则显示：手机号格式错误document.getElementById("prompt-pn").innerHTML = "手机号格式错误";}return flag;}// 校验验证码function checkVerCode() {// 获取验证码let verCode = document.getElementById("verCode").value;// 定义正则表达式，匹配任意数字或英文字母组合而成的6个字符let regVerCode = /^[\d\a]{6}$/;// 校验验证码let flag = regVerCode.test(verCode);if (flag) {// 验证码格式正确则调用服务端的校验验证码的接口，这里省略document.getElementById("prompt-vc").innerHTML = "<img class='tick' src='image/tick.png'/>";} else {// 验证码格式错误，显示：验证码格式错误document.getElementById("prompt-vc").innerHTML = "验证码格式错误";}return flag;}</script>

JS（Javascript）校验表单项的内容是否合规相关推荐

前端校验表单项内容是否合规的JS脚本代码
用途:校验ip地址的格式输入:strIP:ip地址返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) r ...
蚂蚁智能内容合规产品，提供一站式营销合规管控解决方案
随着互联网服务的不断深化,产品营销的形式从传统文本.长图文,增加到短视频.直播等新媒介形态,展现形式愈加丰富的同时,也为营销宣传内容合规审核带来了诸多难题. 如何解决与日俱增的审核量与合规审核人员有限 ...
PHP实现单击“添加”按钮增加一行表单项，并将所有内容插入到数据库中
PHP实现单击"添加"按钮增加一行表单项,并将所有内容插入到数据库中效果图: html+jquery: <html> <head> <meta ht ...
php判断表单修改内容,JavaScript判断用户是否对表单进行了修改的方法_javascript技巧...
本文实例讲述了JavaScript判断用户是否对表单进行了修改的方法.分享给大家供大家参考.具体分析如下: 这段JS代码可以判断出用户是否对表单内容进行了修改,如果修改了表单,并退出浏览器,则会提醒用 ...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle...
Atitit. 数据约束校验原理理论与架构设计理念模式java php c#.net js javascript mysql oracle 1. 主键1 2. uniq index2 3. ...
使用javascript实现表单校验(聚焦onfocus()和离焦onblur()以及在指定位置输出innerHTML='')
使用javascript实现表单校验技术分析确定需要的事件为onfocus()聚焦事件和onblur()离焦事件在指定的位置输出提示信息,就要innerHTML='提示信息' 代码步骤首先确定 ...
js如何写html中的内容,javascript怎样获取某个标签的内容？
在我们平时的JS编程中,经常要获取标签的内容对其进行操作,有很多细节的东西容易被我们忽略,下面让我们来看一下JavaScript如何获取标签中的内容. HTML结构如下: Title 这有个第一个p ...
php js获取表单内容,jquery form表单获取内容以及绑定数据_javascript技巧
在日常开发的过程中,难免会用到form表单,我们需要获取表单的数据保存到数据库,或者拿到后台的一串json数据,要将数据绑定到form表单上,这里我写了一个基于jquery的,formHelp插件,使 ...
javascript 校验非空_Javascript的表单与验证-非空验证
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证. 表单提交前要检查数据的合法性在要对表单里的数据进行验证的时候,可以利用getElementById()来 ...

JS（Javascript）校验表单项的内容是否合规

JS（Javascript）校验表单项的内容是否合规相关推荐

最新文章

热门文章