关于表单验证:vue-element嵌套表单验证

在vue2搭配elementUI中,如果是动静表单中须要表单验证,官网文档的解决办法 https://element.eleme.cn/#/zh... <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'域名' + index" :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{ required: true, message: '域名不能为空', trigger: 'blur' }" > <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button> </el-form-item>如果是多层表单互相嵌套,也是相似的思路 举例1 https://segmentfault.com/a/11...举例2 https://www.cnblogs.com/shy17... 然而 如果多层便当便当嵌套的 el-form-item 不法则的便当生成(子组件并向生成多个el-form-item),不法则的动静验证,那么每一个el-form-item 中的" :prop="'domains.' + index + '.value'" 的prop就很容易报错,或者找不到对应的path,很麻烦 一个比拟简便的写法html <!--只有以后表单组件最终渲染在父组件外部--> <el-form-item prop="testRules" :rules="testRules('本人传参')" > <el-input v-model.trim="test" placeholder="请输出" /> </el-form-item>js //能够间接放在data外面testRules: (data) => { return [ { validator:(rule, value, callback) => { if(!data){ //验证不通过 callback(new Error('!表单验证')); } //验证通过 callback(); }, trigger: 'blur' } ];}这样子写 就能够省下来:prop="'domains.' + index + '.value'" 拼接的那一大堆 ...

April 23, 2021 · 1 min · jiezi

JavaScript使用表单元素验证表单

                   第一章:使用JavaScript验证表单JavaScript的主要作用:验证表单1最简单的表单验证-禁止空白的必填项目1.1最简单的HTML结构网站最基础的就是注册,它是一个系统的交互基础. 例子: <!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>简单列表的html结构</title> </head> <body> <form method="post" action=""> 账户:<input type="text" name=""/><br/><br/> 密码:<input type="password" name=""/><br/><br/> 确认:<input type="password" name=""/><br/><br/> <input type="submit" value="注册" /> </form> </body></html>1.2绑定验证功能因为用户最后要去点击"注册"按钮,所以我们就在"注册"按钮上添加一个onclick事件属性,引用eg.regCheck() 例子: 注册事件 <!DOCTYPE html><html> <!--绑定验证功能,注册事件--> <head> <meta charset="utf-8"> <title>简单列表的html结构</title> </head> <body> <form method="post" action=""> 账户:<input type="text" name=""/><br/><br/> 密码:<input type="password" name=""/><br/><br/> 确认:<input type="password" name=""/><br/><br/> <input type="submit" value="注册" onclick="return eg.regCheck();"/> </form> <script > //声明一个对象,当做命名空间来使用 var eg = {}; eg.regCheck = function(){ } </script> </body></html>eg.regCheck()函数需要添加的行为,获取用户输入的账户信息,给input标签加上一个id属性,JavaScript再通过这个指定的id去取得相应的信息,然后返回验证结果true或false 例子: 给表单添加验证功能 <!DOCTYPE html><html> <!--给表单添加验证功能--> <head> <meta charset="utf-8"> <title>简单列表的html结构</title> </head> <body> <form method="post" action=""> 账户:<input type="text" name="" id="userid"/><br/><br/> 密码:<input type="password" name="" id="userpwd"/><br/><br/> 确认:<input type="password" name="" id="userpwd2"/><br/><br/> <input type="submit" value="注册" onclick="return eg.regCheck();"/> </form> <script > //声明一个对象,当做命名空间来使用 //定义一个公共函数来获取指定id元素,减少代码量,提高代码复用率 var eg = {}; eg.$ = function(id){ return document.getElementById(id); }; eg.regCheck = function(){ var uid = eg.$("userid"); var upwd = eg.$("userpwd"); var upwd2 = eg.$("userpwd2"); if(uid.value == ''){ alert('账户不能为空!'); //返回false就会阻止表单form提交 return false; } if(upwd.value == ''){ alert('密码不能为空!'); //返回false就会阻止表单form提交 return false; } if(upwd.value != upwd2.value){ alert('两次输入密码不相同!'); //返回false就会阻止表单form提交 return false; } return true; }; </script> </body></html>1.3绑定验证的另一种方式 把验证放在"注册"按钮的onclick事件属性里使用,还有另一种调用方式,即form标签的onsubmit事件属性 ...

August 19, 2019 · 3 min · jiezi

iview的checkbox多选框全选时校验问题

在用iview框架的 checkbox 多选框时 遇到了一个校验问题在iview给的例子中 代码如下 https://www.iviewui.com/compo... <template> <div style="border-bottom: 1px solid #e9e9e9;padding-bottom:6px;margin-bottom:6px;"> <Checkbox :indeterminate="indeterminate" :value="checkAll" **@click.prevent.native="handleCheckAll"**>全选</Checkbox> </div> <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange"> <Checkbox label="香蕉"></Checkbox> <Checkbox label="苹果"></Checkbox> <Checkbox label="西瓜"></Checkbox> </CheckboxGroup></template><script> export default { data () { return { indeterminate: true, checkAll: false, checkAllGroup: ['香蕉', '西瓜'] } }, methods: { handleCheckAll () { if (this.indeterminate) { this.checkAll = false; } else { this.checkAll = !this.checkAll; } this.indeterminate = false; if (this.checkAll) { this.checkAllGroup = ['香蕉', '苹果', '西瓜']; } else { this.checkAllGroup = []; } }, checkAllGroupChange (data) { if (data.length === 3) { this.indeterminate = false; this.checkAll = true; } else if (data.length > 0) { this.indeterminate = true; this.checkAll = false; } else { this.indeterminate = false; this.checkAll = false; } } } }</script>上述代码标粗部分所用到的是click方法 但是在做表单校验的时候会出现一个问题,就是当你选择香蕉,苹果,西瓜时会触发v-model = 'checkAllGroup' 绑定的校验方法,但是全选/不全选的时候,这个校验不会触发。 ...

June 10, 2019 · 1 min · jiezi

PHP+AJAX实现账号注册和登陆,附可用demo

前言登陆和注册已经是网站的标配了,所以这是我们web开发学习过程中必学的了。其实很容易实现,只需要懂数据库的增删改查,还有if_else的条件语句即可做出来。目录css –Login-Reg.css server –LoginUser.php –RegUser.php –LoginFrom.html–RegForm.html注册RegForm.html<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>用户注册</title> <link rel=“stylesheet” type=“text/css” href=“css/Login-Reg.css”></head><body> <h2 id=“Reg-text”>用户注册</h2> <div id=“Form-con”> <form id=“form1” onsubmit=“return false” action="##" method=“post”> <input type=“text” name=“username” class=“inputStyle” placeholder=“请输入账号”><br/> <input type=“password” name=“password” class=“inputStyle” placeholder=“请输入密码”><br/> <input type=“password” name=“cpassword” class=“inputStyle” placeholder=“请确认密码”><br/> <input type=“submit” class=“btnStyle” value=“注册” onclick=“RegUser()"> </div> <div id=“Result”></div> </form></body><!– AJAX提交表单 –><script src=“http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type=“text/javascript”> function RegUser() { $.ajax({ type: “POST”,//方法 url: “../server/RegUser.php” ,//表单接收url data: $(’#form1’).serialize(), success: function (data) { //提交成功 var result=document.getElementById(“Result”); result.innerHTML=data[0].result; //注册后跳转 if (data[0].result == “注册成功”) { location.href=“LoginFrom.html”; } }, error : function(data) { //提交失败 var result=document.getElementById(“Result”); result.innerHTML=“连接服务器失败”; } }); } </script></html>RegUser.php<?phpheader(“Content-type:application/json”);// 注册账号验证$username = $_POST[“username”];//获取表单POST过来的用户名$password = $_POST[“password”];//获取表单POST过来的密码$cpassword = $_POST[“cpassword”];//获取表单POST过来的重复密码//表单过滤$user = trim($username);//过滤空格$psw = trim($password);//过滤空格$cpsw = trim($cpassword);//过滤空格//开始判断if($user == "” && $psw == "” && $cpsw == “”){ echo “[{"result":"都还没填呢!"}]”;}else if($user == "" && $psw == “”){ echo “[{"result":"账号和密码都还没填呢"}]”;}else if ($psw == "" && $cpsw == “”) { echo “[{"result":"密码都还没填呢"}]”;}else if($user == "" && $cpsw == “”){ echo “[{"result":"账号和重复密码还没填呢"}]”;}else if ($user == “”) { echo “[{"result":"账号还没填呢"}]”;}else if ($psw == “”) { echo “[{"result":"密码还没填呢"}]”;}else if ($cpsw == “”) { echo “[{"result":"重复密码还没填呢"}]”;}else if ($psw !== $cpsw) { echo “[{"result":"两次输入密码不一样呢"}]”;}else if (strlen($user) < 5){ echo “[{"result":"账号不能小于5位数"}]”;}else if (strlen($psw) < 8){ echo “[{"result":"密码不能小于8位数"}]”;}else if (preg_match(’/^[\x{4e00}-\x{9fa5}]+$/u’, $user)>0){ echo “[{"result":"账号不能为中文"}]”;}else if (preg_match(’/[\x{4e00}-\x{9fa5}]/u’, $user)>0){ echo “[{"result":"账号不能存在中文"}]”;}else if(preg_match("/['.,:;*?~`!@#$%^&+=)(<>{}]|]|[|/|\|"||/",$user)){ echo “[{"result":"账号不能存在特殊符号"}]”;}else{ //生成用户ID,为简单学习,随机生成随机数 $uid = rand(10000,99999); //密码MD5加密 $md5psw = MD5($psw); // 数据库连接 $con = mysql_connect(“localhost”,“root”,“root”); mysql_select_db(“test”, $con); mysql_query(“SET NAMES UTF8”); //查询数据库是否有存在该用户 $exist = mysql_query(“SELECT * FROM userlist WHERE username = ‘$user’”); $exist_result = mysql_num_rows($exist); if($exist_result){ //如果存在该用户 echo “[{"result":"该账号已被注册"}]”; }else{ //插入数据库 mysql_query(“INSERT INTO userlist (username, password, userid) VALUES (’$user’, ‘$md5psw’, ‘$uid’)”); echo “[{"result":"注册成功"}]”; }}?>登陆LoginFrom.html<!DOCTYPE html><html><head> <meta charset=“utf-8”> <title>用户登陆</title> <link rel=“stylesheet” type=“text/css” href=“css/Login-Reg.css”></head><body> <h2 id=“Reg-text”>用户登陆</h2> <div id=“Form-con”> <form id=“form1” onsubmit=“return false” action="##" method=“post”> <input type=“text” name=“username” class=“inputStyle” placeholder=“请输入账号”><br/> <input type=“password” name=“password” class=“inputStyle” placeholder=“请输入密码”><br/> <input type=“submit” class=“btnStyle” value=“登陆” onclick=“LoginUser()"> </div> <div id=“Result”></div> </form></body><!– AJAX提交表单 –><script src=“http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type=“text/javascript”> function LoginUser() { $.ajax({ type: “POST”,//方法 url: “../server/LoginUser.php” ,//表单接收url data: $(’#form1’).serialize(), success: function (data) { var result=document.getElementById(“Result”); //提交成功 result.innerHTML=data[0].result; if (data[0].result == “登陆成功”) { result.innerHTML=“登陆成功”; }else if (data[0].result == “fail”) { result.innerHTML=“登陆失败,账号或密码错误”; } }, error : function(data) { //提交失败的提示词或者其他反馈代码 var result=document.getElementById(“Result”); result.innerHTML=“连接服务器失败”; } }); } </script></html>LoginUser.php<?phpheader(“Content-type:application/json”);// 注册账号验证$username = $_POST[“username”];//获取表单POST过来的用户名$password = $_POST[“password”];//获取表单POST过来的密码//表单过滤$user = trim($username);//过滤空格$psw = trim($password);//过滤空格//开始判断if($user == "” && $psw == “”){ echo “[{"result":"账号和密码都没填呢!"}]”;}else if ($user == “”) { echo “[{"result":"账号还没填呢"}]”;}else if ($psw == “”) { echo “[{"result":"密码还没填呢"}]”;}else{ // 数据库连接 $con = mysql_connect(“localhost”,“root”,“root”); mysql_select_db(“test”, $con); mysql_query(“SET NAMES UTF8”); //校验MD5密码 $md5psw = MD5($psw); //查询数据库账号密码是否一致 $exist = mysql_query(“SELECT * FROM userlist WHERE username = ‘$user’ AND password = ‘$md5psw’”); $exist_result = mysql_num_rows($exist); if($exist_result){ echo “[{"result":"登陆成功"}]”; }else{ echo “[{"result":"fail"}]”; }}?>数据库自增id –id –int(11)用户id –userid – varchar(32)用户名 –username – varchar(32)密码 –password – varchar(32)注册时间 –regtime –timestampdemohttp://www.likeyunba.com/demo…Author:TANKINGweb:http://likeyunba.comWeChat:likeyunba520Date:2019-2-2 ...

February 2, 2019 · 2 min · jiezi

基于vue.js 2.0表单验证vuelidate插件介绍及使用

官网:https://monterail.github.io/v…Github:https://github.com/monterail/…具体的安装方法和项目引入使用就不说了,官网说的很清楚。下面直接上例子一、简单介绍先简单看下main.js 做了什么测试用的页面:test-page.vue1、$v values 属性和值刷新页面,在浏览器上可以看到如下结果$v 常用的属性和值:required – 需要非空数据,false-输入框现为空值,true-输入框现为非空值$model – this.$v.name.$model相当于this.name,相当于v-model的值$invalid – 验证状态,true-验证不通过,false-验证通过$dirty – 表示用户是否至少触摸了一次验证字段。用$touch和$reset管理此标识$error – 用于判断是否应显示错误消息。true-显示,false-不显示$error === this.$dirty && !this.$pending && this.$invalid$pending – 始终为false:所有验证器都是同步的email – 邮箱格式验证,false-格式错误,true-格式正确(包括空值)2、$v methods 方法$touch – 触发验证,把指定的验证器及其所有子项的$dirty置为true$reset – 重置验证,把指定的验证器及其所有子项的$dirty置为false这些方法可以在html中使用@input或@blur绑定,也可以在js中触发执行3、validations 验证配置项注意:所有的验证器需要与data下面的数据有对应值4、Builtin validators 内置的验证规则官方自带的验证规则:required, between, maxLength, minLength, minValue, maxValue, alpha, alphaNum, numeric, email, ipAddress, macAddress, sameAs, url…为了方便vue每个子组件的使用,在main.js做了统一引入,并挂载在vue原型的$rules上,可以看之前的main.js代码截图。二、基于vuelidate的vue组件封装及使用1、需求:(1)给输入框提供验证规则,必填、邮箱地址、手机号、字母数字下划线等等;(2)当不满足其中一条规则时,给出提示,不能做后续操作(例如向后端发请求);(3)提示方式:如果验证不通过,当输入框失焦,输入框标红,鼠标悬浮、聚焦出现提示语;(4)当输入框有多条验证规则时,只显示第一条触发规则的提示语;(5)第一次输入,当输入框的验证规则包含有“输入内容限制”的规则时,比如只能输入数字,需要即时提示(输入过程就要提示),主动删除内容后,提示消失。输入框失焦后,只要触发规则,提示语会一直跟随。2、封装思路(1)需要提供的属性有:error—一个标识,用于判断是否标红输入框,是否显示错误提示语。msgList—一个json数组,当有多少条验证规则时就有多少项;每一项包括,show:是否显示错误提示的标识,text:错误提示语。(2)父组件调用时,能够自定义需要验证的内容,可以是输入框、选择框等等。(利用slot)(3)错误提示语可以根据输入框(选择框)的高度,自动跟随提示在下方。tip-msg.vue组件关键的技术点已经用红框标出。3、基本使用方法因为在很多模块都会使用表单验证,所以在main.js全局引入并注册test-page.vue4、自定义验证规则除了官方自带的验证规则,我们还可以根据实际业务需求自定义验证规则。vuelidate-rule.js带参数的自定义规则:注意,当验证的字段是非必填时,即没有required时,要加上 !helpers.req(value) 这个req帮助器。可以参考GitHub上的官网源码:main.jstest-page.vue5、Config keywords 配置关键字(介绍$each的用法)6、$each 配合 $iter 用法这里需要注意的一点,使用了$iter之后,index变成了string,如果要变回number可以使index-07、requiredIf用法官方说明:requiredIf-仅当提供的属性或谓词为true时才需要非空数据。还是直接上例子更直白:直接点击提交,验证通过输入ip之后点击提交,验证不通过以上,就是使用vuelidate插件做表单验证开发中常用到的功能,还有更多强大的功能等着各位去发现,加油吧少年!文中如有不正确的地方欢迎指出~

January 23, 2019 · 1 min · jiezi