表单验证

表单验证 Form组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则， 并将Form-Item的prop属性设置为需校验的字段名即可 <el-form-item label="活动名称" prop="name"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" 注1：有多个表单，怎么在提交进行区分？ 我们在rules这里写了对表单的验证规则，但是我们如何在methods里进行指定的表单进行认证， 所以我们一开始就在el-form里写了 ref="ruleForm"，我们在methods里就可以用 注2：清空表单验证信息 this.$refs[formName].resetFields(); CUD 新增 添加修改/删除按钮 在<template>上使用特殊的slot-scope 特性，可以接收传递给插槽的prop 功能： 1、dialog 布局 2、表单验证 3、新增功能 4、修改功能 5、删除功能 核心代码： export default { data() { return { listData: [], formInline: { page: 1, rows: 10, title: '' }, total: 0, editForm: { id: 0, title: '', body: ''

1、英文字母 1 <script type="text/javascript"> 2 //验证只能是字母 3 function checkZm(zm){ 4 var zmReg=/^[a-zA-Z]*$/; 5 if(zm!=""&&!zmReg.test(zm)){ 6 alert("只能是英文字母！"); 7 return false; 8 } 9 } 10 </script> 2、汉字 1 <input type="text" onblur="isChinese(this.value)" placeholder="请输入中文！" /> 2 <script language="javascript"> 3 function isChinese(obj){ 4 var reg=/^[\u0391-\uFFE5]+$/; 5 if(obj!=""&&!reg.test(obj)){ 6 alert('必须输入中文！'); 7 return false; 8 } 9 } 10 </script> 3、数字 1 <script language=javascript> 2 //验证只能为数字 3 function checkNumber(obj){ 4 var reg = /^[0-9]+$/; 5 if(obj!=""&&!reg.test(obj)){ 6 alert(

1.判断输入值的长度 1.1 根据输入值的类型不同，限制输入值长度不同。 此时需要使用自定义的校验规则。 如长度要求：中文输入5位，非中文10位 1 <FormItem label="名称" {...formItemLayout}> 2 {getFieldDecorator('name', { 3 rules: [ 4 { 5 required: true, 6 message: "名称不能为空", 7 }, 8 { 9 validator: async (rule, value, callback) => { 10 const reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); //正则校验 11 if(reg.test(value) && value.length > 5){ 12 callback("中文最多5位"); 13 }else if(value.length > 10){ 14 callback("非中文最多10位"); 15 } else{ 16 callback(); 17 } 18 } 19 } 20 ], 21 })( 22 <Input placeholder="这里输入名称" allowClear />, 23 )} 24 </FormItem> 1.2 不对输入类型做区分，统一设置长度。 如： 输入值长度最少5位

HTML表单： HTML表单用于搜集不同类型的输入 < form >标签元素： HTML表单用于收集用户输入； form元素定义HTML表单 < form >属性列表： 属性 描述 accept-charset 规定在被提交表单中使用的字符集（默认：页面字符集）。 action 规定向何处提交表单的地址（URL）（提交页面）。 autocomplete 规定浏览器应该自动完成表单（默认：开启）。 enctype 规定被提交数据的编码（默认：url-encoded）。 method 规定在提交表单时所用的 HTTP 方法（默认：GET）。 name 规定识别表单的名称（对于 DOM 使用：document.forms.name）。 novalidate 规定浏览器不验证表单。 target 规定 action 属性中地址的目标（默认：_self）。 表单元素： 表单元素指的是不同类型的 input元素、复选框、单选按钮、提交按钮……等 < input >标签： < input >标签元素最重要的是 表单元素 ，标签根据不同的 type 属性，有多态性。 文本输入： <input type="text" /> 定义单选按钮输入 <input type="radio" /> 定义提交按钮 <input type="submit" /> action属性： 定义在提交表单是执行的动作

H5新增内容 1.H5新增语义化标签 　　 标签语义化：在合适的地方放合适的标签，利于SEO优化 　　 <!-- 头部 --> <header></header> <!-- 导航 --> <nav></nav> <!-- 网页的主体内容 --> <main> <!-- 有联系的内容组 --> <section> <!-- 侧边栏 --> <aside></aside> <!-- 独立完整的内容 --> <article></article> </section> </main> <!-- 底部 --> <footer></footer> 　　 main 标签的语义化特性：可以使辅助技术快速定位到页面的主体。有些页面中有 “跳转到主要内容” 的链接，使用main标签可以使辅助设备自动获得这个功能。 　　article 标签的语义化特性：是一个分段标签，用于呈现独立及完整的内容。这个标签适用于博客入口、论坛帖子或者新闻文章。 　　section 标签的语义化特性：用于对与主题相关的内容进行分组。它和article可以根据需要嵌套着使用。举个例子：如果一本书是一个article的话，那么每个章节就是section。 　　header 标签的语义化特性：可以使辅助技术快速定位到它的内容。 　　nav 标签的语义化特性：用于呈现页面中的主导航链接。它可以使屏幕阅读器快速识别页面中的导航信息。

表单 1、表单的创建 在 yii 中主要通过 yii\widgets\ActiveForm 类来创建表单 ActiveForm::begin() 不仅创建了一个表单实例，同时也 标志着表单的开始 。 放在 ActiveForm::begin() 和 ActiveForm::end()之间的所有内容都被包裹在 html 的 from 标签中 中间是通过调用 ActiveForm::field() 方法来创建一个 ActiveForm 实例，这个实例会 创建表单元素与元素的标签 ， 以及对应的 js 验证 ActiveField 有一个对应的模型和属性， input 输入框的 name 属性 会自动的根据属性名来创建 ，同时，还会用属性的 验证规则来验证用户输入的数据 e.g. 　　 <?= $form->field($model,'name')->textInput(['autofocus' => true]) ?> 解析后的标签为： 　　 <input type="text" id="contactform-name" class="form-control" name="ContactForm[name]" autofocus /> 还会 自动添加 js 验证 ，代码如下： jQuery('#contactform-name').yiiActiveForm([{ 　　"id" :

1.Input Enter事件 <input onKeyUp={this.onKeyUp} onPressEnter={this.enter} /> onKeyUp = (e) => { if(e.keyCode === 13){ console.log("我是enter") } } enter= (e) => { console.log("我是enter") } 2.表单默认值（读取后台数据） <FormItem {...formItemLayout} label="手机号码" > {getFieldDecorator('phone', { rules: [{ required: true, message: '请输入手机号码', }], initialValue:info.phone?info.phone:'', })( <Input placeholder="请输入手机号码" /> )} </FormItem> initialValue:info.phone?info.phone:”, 必须使用initialValue来动态赋值 3.表单时间 const FormItem = Form.Item; <Form hideRequiredMark onSubmit={this.handleSubmit}> <FormItem {...formItemLayout} label=

想套用一下前端的组件写一个表单验证的页面，于是试了一下jQuery UI 官网的例子 首先把官网的例子贴上： <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jQuery UI Dialog - Modal form</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/resources/demos/style.css"> <style> label, input { display:block; } input.text { margin-bottom:12px; width:95%; padding: .4em; } fieldset { padding:0; border:0; margin-top:25px; } h1 { font-size: 1.2em; margin: .6em 0; } div#users-contain { width: 350px

用submit来提交表单，然后在 js 中监听submit方法，用ajax提交表单最后阻止submit的自动提交。 在标准浏览器中，阻止浏览器默认行为使用event.preventDefault()，而在IE6~8中，使用returnValue属性来实现。 <html> <head> <script type="text/javascript" src="jquery-1.9.0.min.js"></script> </head> <body> <form action="" id='submitform'> username: <br> <input type="text" name="username" value="" required="required"> <br> password: <br> <input type="text" name="password" value="" required="required"> <br><br> <input type="submit" value="Submit"> </form> <script type="text/javascript" language="javascript"> $("#submitform").on("submit", function(event) { $.ajax({ ...... }); /

关于表单提交，做法有很多中，根据具体需求，做出不同的反应吧。LZ这里还是根据实际需求，写几个简单的案例。我们知道，对于表单提交，正常直接action中写url，点击submit按钮就可以提交了。 一：需求是：在订单列表表单页面，每条记录前都有一颗checkbox复选框，选中则记录id值，选中多个则九路多个id值。然后在表单之外有颗“导出订单”按钮，当点击该按钮的时候，提交选中的复选框的记录的id值到后台java代码。 　　下面有三张图片：第一张是form的写法，第二张是做表单提交ajax请求的，最后一张是将id值传到后台的部分java代码。 　　 　　================================================================================================== 　　================================================================================================== 　　 　　================================================================================================== 　　===============