js-最常用的js表单校验1

最近写了无数各种形式的表单，记录下奇奇怪怪的校验规则~

一：首先是element自带的rules校验规则：

element作为常用框架，自带rules属性简单易懂，官方文档一目了然，不再赘述，应付常用校验足够了，

相对麻烦的是自定义的校验函数，举个例子：

html部分：

<el-form id="form":rules="rules":inline="true":model="form"size="medium"ref="form"label-position="right"label-width="136px"validate-on-rule-changeclass="postForm" autocomplete="off" inline-message><el-form-item prop="phone"><el-input v-model="form.phone" name="phone" id="phone" size="medium" required></el-input></el-form-item><el-form-item prop="money"><el-input v-model="form.money" name="money" id="money" size="medium" required></el-input></el-form-item></el-form>

下面是js部分：

rules:{phone: [{ required: true, message: '请输入手机号码', trigger: 'blur' },{ validator:function(rule,value,callback){if(/^1[34578]\d{9}$/.test(value) == false&&/^\d{4}-?\d{4}$/.test(value) == false){callback(new Error("请输入正确的手机号或电话号码"));}else{callback();}}, trigger: 'blur'}],money: [{required: true, message: '请输入金额', trigger: 'change'},{ validator:function(rule,value,callback){let num=Number(me.numRep)+Number(me.meetingForm.numWork)if(/^\d+(\.\d{1,6})?$/.test(value) == false){callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));}else if(Number(value) >num*550/10000){callback(new Error("最长可输入6位小数点，系统限制最大不能超过 550*总人数/10000"));}else{callback();}}, trigger: 'blur'}]
}

formValidate(formName){this.$refs[formName].validate((valid) => {if(valid) {this.validateForm=true;}else{this.$message.warning("请确认输入信息无误！");this.validateForm=false;}});return this.validateForm;
},

二：接下来也是比较常用的，jQuery+easyUI 的表单校验：

依旧直接上例子：

html部分：

<form id="formA" class="postForm" autocomplete="off"><table role="table" class="desigerTable" data-usage="基本信息录入" id="t5" cellpadding="10" cellspacing="10"><tbody><tr><td class="targetarea droppable"><div data-type="1"><div class="form-group"><label class="col-sm-4 control-label">总天数</label></div></div></td><td class="targetarea droppable"><div data-type="1" class="wrapper"><div class="form-group"><input class="form-control" placeholder="" id="days"name="days" type="text"></div></div></td><td class="targetarea droppable"><div data-type="1"><div class="form-group"><label class="col-sm-4 control-label">总人数</label></div></div></td><td class="targetarea droppable" colspan="2"><div data-type="1" class="wrapper"><div class="form-group"><input class="form-control" placeholder="" id="person"name="person" type="text"></div></div></td></tr></tbody></table>
</form>

/*** 校验主表单*/var formValidate = function () {//表单验证规则$("#formA").validate({ignore: "",rules: {days: {required: false,number: true,checkDur:true},person: {required: false,number: true,checkPerson:true},},messages: {days: {number: "请输入数字",checkDays:"*总天数不超过2天，可输入小数，0.5，1，1.5！"},person: {number: "请输入数字",checkPerson:"*请输入正整数！"},},//是否在获取焦点时验证onfocusout:false,//是否在敲击键盘时验证onkeyup:false,//提交表单后，（第一个）未通过验证的表单获得焦点focusInvalid:true,//当未通过验证的元素获得焦点时，移除错误提示focusCleanup:true,});$.validator.addMethod("checkDays",function(value,element){if(value == 0.5||value == 1||value == 1.5||value == 2){return this.optional(element)||true}},"*总天数不超过2天，可输入小数，0.5，1.5！");$.validator.addMethod("checkPerson",function(value,element){var me = /(^[1-9]\d*$)/;return this.optional(element)||(me.test(value));},"*请输入正整数！");/*** 校验方法调用*/var dataValidate = function (data) {if (!$("#formA").valid()) {Util.alert("请输入正确的数据！");return false;}return data;};

三：原生js form表单校验：

原生js校验可直接调用onclick，onfocus，onblur，onkeyup等事件来实现

（ps：原生真的永远的神，没有什么是原生js做不到的，如果做不到，就是我太菜了，继续滚去学原生。。）

继续简单明了举例子：

html部分：

<form action="example.html" method="post" enctype="multipart/form-data" class="register"><div><label for="idCode">身份证号</label><input type="text" id="idCode" class="idCode"     name="idCode" placeholder="身份证号"/></div><div><label for="passwd">密码</label><input type="passwd" name="passwd" id="passwd" class="passwd" placeholder="密码"/></div>
</form>

onload = function () {blurElement();submitForm();}//元素失去焦点时校验function blurElement() {//验证姓名document.getElementById("ame").onblur = function () {vailidateName();};//表单提交函数function submitForm() {let form = document.getElementsByClassName("register")[0];form.onsubmit = function (e) {let flag =vailidateName()& vailidatePasswd()& vailidateID();return flag == 1 ? true : false;};}//验证身份证号码 18位function vailidateID() {let id = document.getElementById("idCode");let span = next(id);let value = id.value;//判断空if (value == "") {span.innerHTML = "身份证号码不能为空";span.style.color = "red";return false;}//判断长度if (value.length != 18) {span.innerHTML = "身份证号码长度18位";span.style.color = "red";return false;}//判断前17位数字let reg = /^\d{17}$/;let str = value.substring(0, 17);if (!reg.test(str)) {span.innerHTML = "身份证号码前17位必须是数字";span.style.color = "red";return false;}//验证密码:6-12位非空，必须包含大写字符，字母开头function vailidatePasswd() {let passwd = document.getElementById("passwd");let span = next(passwd);let value = passwd.value;let code = /^[a-zA-Z]$/;//非空if (value == "") {span.innerHTML = "密码不能为空";span.style.color = "red";return false;}}

ok，结束，以上就是最近写的典型的前端校验表单例子，还在跟需求battle新的校验。。下一篇是更让人吐血的动态校验。。。
博客

js-最常用的js表单校验1相关推荐

Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
vee-validate 是为 Vue.js 量身打造的表单校验框架,允许您校验输入的内容并显示对应的错误提示信息.它内置了很多常见的校验规则,可以组合使用多种校验规则,大部分场景只需要配置就能实现开 ...
【前端2】js：原始类型，运算符，调试，页面加载，轮播图，Bom（对象，时钟），Dom（全选全不选，省市级联，隔行/触摸换色，表单校验）
文章目录 1.js两种引入:js最终要引入到html在浏览器中运行 2.js五大原始类型:undefined 3.js的运算符和流程控制:js不支持单&和单|性能低 4.案例_99乘法表:So ...
jQuery表单校验jquery.validate.js的使用
jQuery是一个快速.简洁的js库,为网站的快速开发简化了HTML文档遍历,事件处理,动画,以及Ajax交互.使用jQuery将极大的提高编写javascript代码的效率, 让写出来的代码更加优雅 ...
轻量级的jQuery表单校验插件: Happy.js
当前已经有许多jQuery表单校验插件,并且有些也很不错,但这些插件功能太强大,使用比较复杂.如果你想找一个简单点的插件 Happy.js 刚好是一个很好的选择. 这个插件是轻量级的,所以只支持一些输 ...
注册表单校验 js java,JavaScript表单验证完美代码
用原生JS写一个简单的表单验证首先,是html部分新用户注册基本信息用户名: 请输入至少3位的用户名密码: 请输入4到8位的密码确认密码: 请再输入一遍密码手机号码: 请输入11位手机号 ...
Fort.js – 时尚、现代的表单填写进度提示效果
Fort.js 是一款用于时尚.现代的表单填写进度提示效果的 JavaScript 库,你需要做的就是添加表单,剩下的任务就交给 Fort.js 算法了,使用非常简单.提供了Default.Gradi ...
html js文件域val,js实现文件上传表单域美化特效
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. @H_502_ ...
js 用submit()方法提交表单，页面闪退问题以及解决方法
1.今天遇到一种情况,js使用submit方法提交表单,怎么都提交不过去,加断点倒跳过去了,主要实现的是这样的一个功能,点击一个按钮触发一个方法,在方法底下再提交表单过去,主要代码如下: <bu ...
php 美化js文件,js实现文件上传表单域美化特效_javascript技巧
一款效果非常时尚的文件上传表单域美化特效,下面给出制作的简要教程. 先上几个效果饱饱眼福: 使用方法这些文件上传域的美化使用的方法都是隐藏原生的元素,然后使用一个元素来制作美化效果. HTML结构 ...

js-最常用的js表单校验1

js-最常用的js表单校验1相关推荐

最新文章

热门文章