表单验证

JS 08表单操作_表单域

痞子三分冷 提交于 2020-01-20 17:35:16
一、表单的获取方式 document.getElementById() document.forms[index]; document.forms[form_name] document.form_name function testGetForm() { var frm = document.getElementById("regForm"); // 常用 console.log(frm); frm = document.forms[0]; console.log(frm); frm = document.forms["aaform"]; console.log(frm); frm = document.aaform; // 常用,仅表单可以通过name属性获取 console.log(frm); } 二、表单对象的属性 action :表单提交的地址 method :表单的提交方式:get(默认)、post get方式和post方式的区别 1.get方式会将提交的数据以(?name1=value1&name2=value2...)放在url后面 post方式会将数据以(name1=value1&name2=value2...)放在“请求实体”中 2.get将数据放在url后,由于url是有长度的,且url是可见,所以get方式不适合发送一些敏感数据 post方式将数据放在

Web安全之CSRF

怎甘沉沦 提交于 2020-01-20 16:55:35
CSRF 一.什么是CSRF 1.CSRF:Cross-site request forgery 跨站请求伪造 2.CSRF可以实施的前提: (1)CSRF利用站点对用户浏览器的信任 (2)被攻击网站依赖用户的身份认证 (3)网站信任已经验证过的用户 (4)攻击者使得用户的浏览器发送HTTP请求到目标网站 注意:攻击者利用的是浏览器会主动带上cookie这一原理,并没有从用户的磁盘下直接盗取用户的cookie。所有的动作都是浏览器主动完成的。 浏览器给哪个网站发出请求,不会在意是从哪个网站发出的,只在意发送到哪个网站 二.攻击过程 1.攻击原理: (1).用户浏览器首先登陆了bank.com,bank.com生成了cookie并保留在用户浏览器Victim.Brower中。 (2).用户被欺骗,访问了attacker.com (3).attacker网站中隐藏了一个表单,并用js进行自动表单请求,用户浏览器会自动执行这个操作。 攻击者伪造了本应由用户自己主动发出的行为。 (4).之后用户浏览器再访问bank.com,会自动带上cookie。 (5).之后bank.com响应这个请求,攻击完成。 2.在zoobar网站上进行攻击的实现 所谓实现CSRF攻击,就是比如用户的正常界面是A,在这个A上存在提交的表单或者需要和服务器交互的什么东东

如何控制,textField的宽度,

前提是你 提交于 2020-01-20 10:26:24
继上一节内容,我们在表单里加了个两个文本框。如下所示代码区的第42行位置,items: [txtusername, txtpassword]。 1.代码如下: 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title></title> 5 <!--ExtJs框架开始--> 6 <script type="text/javascript" src="/Ext/adapter/ext/ext-base.js"></script> 7 <script type="text/javascript" src="/Ext/ext-all.js"></script> 8 <link rel="stylesheet" type="text/css" href="/Ext/resources/css/ext-all.css" /> 9 <!--ExtJs框架结束--> 10 <script type="text/javascript"> 11 Ext.onReady(function (

DAY03

廉价感情. 提交于 2020-01-20 08:28:16
八.结构标记 h5新出的标记.作用是取代div描述整个网页的结构,增加代码的可读性,和div的作用一模一样,只是增加了可读性 1 < header>< /header> 头部 2 < footer>< /footer> 脚部 3 < nav>< /nav> 导航栏 4 < section>< /section> 主体内容 5 < aside>< /aside>侧边栏 6 < article></ article> 定义与文字相关的内容(论坛,回帖,评论等) 九.form表单(***) 1 作用 (1)提供可视化的输入控件 (2)收集机用户输入的信息,并提交给服务器 注意:ajax可以提交请求,可以接收请求 使用form就不用form 不用form就需要手动收集信息 2 form的组成 (1)< form> < /form> 属性: ①action —定义表单提交时发送的动作(发送给哪个URL) 默认缺省提交给本页面 ②method —定义表单的提交方式 默认缺省是http原生的"get"方法:特点:明文提交,内容在地址栏显示,提交的数据有大小限制(2kb),使用时机—向服务器要数据的时候 第二种http原生的post方法 特点①隐式提交,提交的内容不在地址栏显示②post提交的数据没有大小限制 ③其他原生 ③enctype —指定表单提交的数据的编码方式

Ant Design Vue 表单验证踩坑

自古美人都是妖i 提交于 2020-01-20 04:36:36
最近一个项目用了 Ant Design Vue ,我也不知道为啥用这个。。。FORM表单验证踩地坑简直是让我哭哭哭 以前用elementUI,Iview,很顺手,v-model简直是标配 可是这个Ant Design Vue 在需要验证的时候 不能用 v-model ,用 v-decoration 。 贴代码 如下 <style lang="less"> @import 'sourceManage'; </style> <template> <div ref="sourceManage"> <a-row :gutter="24"> <a-col :sm="12" :md="8" :xl="8"> <h3> 所属类目: <span>{{databaseType}}</span> </h3> </a-col> <a-col :sm="12" :md="3" :xl="3" :offset="11"> <a-button type="primary" icon="plus" @click="showSourseForm">添加源</a-button> </a-col> </a-row> <a-row :gutter="24" style="margin-top:30px;" v-if="databaseInformation.length"> <a-col :sm="12" :md="8

2020 零基础到快速开发 Vue全家桶开发电商管理系统(Element-UI)【修改用户】

限于喜欢 提交于 2020-01-18 19:18:44
文章目录 1、引言 2、修改用户 2.1 展示修改用户的对话框 2.2 根据id查询对应的用户信息并渲染修改用户的表单 2.3 实现修改用户表单的重置操作 2.4 完成提交修改之前的表单预验证和提交表单完成用户信息的修改 3、结束语 点击进入Vue❤学习专栏~ 1、引言 寒假是用来反超的! 一起来学习Vue把,这篇博客是关于修改用户,请多指教~ 2、修改用户 2.1 展示修改用户的对话框 在修改按钮上绑定一个时间,设置Visable为true即可 //展示修改用户的对话框 showEditDialog ( ) { this . editDialogVisible = true } 2.2 根据id查询对应的用户信息并渲染修改用户的表单 2.3 实现修改用户表单的重置操作 //监听修改用户对话框的关闭事件 editDialogClosed ( ) { this . $refs . editFormRef . resetFields ( ) } 2.4 完成提交修改之前的表单预验证和提交表单完成用户信息的修改 //修改用户的表单预验证 editUserInfo ( ) { this . $refs . editFormRef . validate ( async valid => { //console.log(valid) if ( ! valid ) return /

Vue + ElementUI的电商管理系统实例11 商品分类

不问归期 提交于 2020-01-17 12:32:01
1、创建商品分类分支goods_cate并push到远程 查看分支: git branch 创建分支: git checkout -b goods_cate 推送到远程:(以前码云中没有该分支,所以要加-u,如果码云中有该分支,则不需要加-u) git push -u origin goods_cate 2、通过路由加载商品分类组件 新建goods文件夹和Cate.vue文件: <template> <div> <h3>商品分类组件</h3> </div> </template> <script> export default { } </script> <style lang="less" scoped> </style> 添加路由: import Cate from '../components/goods/Cate.vue' const routes = [ { path: '/', redirect: '/login' }, // 重定向 { path: '/login', component: Login }, { path: '/home', component: Home, redirect: '/welcome', // 重定向 children: [ // 子路由 { path: '/welcome', component: Welcome }, { path:

【实战】恶搞图片生成器

天大地大妈咪最大 提交于 2020-01-15 09:40:25
我们要做什么 随着“微信朋友圈”的日益火爆,朋友圈晒图已成为越来越多的人放松娱乐的休闲方式。本实例我们就来开发一个“恶搞图片生成器”,生成一张有意思的图片,发布到“朋友圈”,让你成为“霸屏小达人”。 在本实例中,我们使用HTML5响应式设计(兼容手机),利用PHP的强大的图形图像处理技术——GD库,开发一个“恶搞图片生成器”。首页运行效果如图1.1所示。 图1.1 首页运行效果 部分恶搞图片生成器效果如图1.2、1.3、1.4和1.5所示。 可以这样来思考 通过对运行效果图的分析,不难发现,我们主要是应用GD库在图片上添加文字的功能。首先,准备一张缺少关键字的图片。然后,设置一个表单,添加表单内容(即图片中缺失的关键字)。最后,提交表单,将关键字写在图片的对应位置上。实现流程如图1.5所示。 放手去做吧! 1.3.1 首页设计 我们先来创建一个项目,命名为“FunPic”。接下来,开始创建首页index.php文件。为实现响应式效果,我们使用Frozen UI ( https://frozenui.github.io )框架设计首页样式。将“光盘/01/FunPic/Public/”目录复制到根目录下,此时目录结构如图1.6所示。 图1.6 新增Public文件后的目录结构 编写index.php文件,具体代码如下: <代码位置:FunPic\index.php> 01 <

element upload上传表单验证

こ雲淡風輕ζ 提交于 2020-01-15 07:31:07
代码如下 自己写上传的代码,所以action可以随意写 on-change:根据变化修改from中的file值 亲测有效 没有图片时 添加图片后 <template> <div> <div class="container"> <el-form style="width:60%;" :model="form" status-icon :rules="rules" ref="form" label-width="100px" class="demo-ruleForm" > <el-form-item label="描述" prop="desc"> <el-input type="textarea" maxlength="50" show-word-limit v-model="form.desc"></el-input> </el-form-item> <el-form-item label="添加图片" prop="file" ref="uploadElement"> <el-upload action="#" multiple v-model="form.file" ref="upload" list-type="picture-card" :auto-upload="false" :on-preview="showImg" :on-remove="remove" :on

vue 表单 验证 async-validator

删除回忆录丶 提交于 2020-01-15 00:57:40
1、使用插件 async-validator async-validator 地址: https://github.com/yiminghe/async-validator 2、示例(vue+element-ui) <el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm"> <el-form-item label="年龄" prop="age" :rules="[ { required: true, message: '年龄不能为空'}, { type: 'number', message: '年龄必须为数字值'} ]" > <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button> <el-button @click="resetForm('numberValidateForm')"