表单验证 | 易学教程

element表单验证

阅读更多关于 element表单验证

1 <template> 2 <el-dialog title="修改密码" 3 :visible.sync="isChangeDialog" 4 width="23%" 5 ref="dialog" 6 :modal-append-to-body='false' 7 :before-close="close" 8 class="changepwd" 9 > 10 <div class="diolag-details"> 11 <el-form class="user-account-key" ref="form" :model="form" :rules="rules" label-width="100px"> 12 <el-form-item label="原密码" prop="oldpwd"> 13 <el-input placeholder="请输入原密码" v-model="form.oldpwd" @blur="getoldpwd"></el-input> 14 </el-form-item> 15 <el-form-item label="新密码" prop="newpwd"> 16 <el-input type="password" placeholder="请设置新密码" v-model="form.newpwd"></el-input> 17 </el-form

前端知识之HTML内容

阅读更多关于前端知识之HTML内容

前端知识之HTML内容 HTML介绍 Web服务本质 import socket sk = socket.socket() sk.bind(("127.0.0.1", 8080)) sk.listen(5) while True: conn, addr = sk.accept() data = conn.recv(8096) conn.send(b"HTTP/1.1 200 OK\r\n\r\n") conn.send(b"<h1>Hello world!</h1>") conn.close() 浏览器发请求 --> HTTP协议 --> 服务端接收请求 --> 服务端返回响应 --> 服务端把HTML文件内容发给浏览器 --> 浏览器渲染页面 HTML是什么？超文本标记语言（Hypertext Markup Language, HTML）是一种用于创建网页的标记语言。本质上是浏览器可识别的规则，我们按照规则写网页，浏览器根据规则渲染我们的网页。对于不同的浏览器，对同一个标签可能会有不同的解释。（兼容性问题）网页文件的扩展名：.html或.htm HTML不是什么？ HTML是一种标记语言（markup language），它不是一种编程语言。 HTML使用标签来描述网页。 HTML文档结构最基本的HTML文档： <!DOCTYPE html> <html lang="zh

HTML5 表单新的 Input 类型

阅读更多关于 HTML5 表单新的 Input 类型

H5新增了电子邮箱，手机号码，网址，数量，搜索，范围，颜色选择，时间日期等input类型 1.电子邮箱 type="email" 提供电子邮箱格式验证如果格式不对，会阻止表单提交 <div> <label for="email">电子邮件</label> <input type="email" id="email"> </div> 2.手机号码 type="tel" 并非用来验证手机号码，而是用来在移动端浏览器调用数字键盘 <div><label>电话:<input type="tel" name="userTel"></label></div> 3.网址 type="url" 验证只能输入合法的网址，且必须包含Http:// <div><label>网址:<input type="url" name="userUrl"></label></div> 4.数量 type="number" 只能输入数字不能输入其他字符,在pc端获取焦点时有上下箭头点击可以加减值可以设置最大值和最小值,超出范围会阻止提交 <div> <label>数量:<input type="number" name="userNumber" max="100" min="0"></label> </div> 5.搜索 type="search" PC端获取焦点时输入框的右边有个一"X"

使用vee-validate表单验证插件如何设置中文提示

阅读更多关于使用vee-validate表单验证插件如何设置中文提示

版本： vee-validate v3.x设置如下： import * as rules from 'vee-validate/dist/rules'; import zh_CN from 'vee-validate/dist/locale/zh_CN' for (let rule in rules) { extend(rule, { ...rules[rule], // add the rule message: zh_CN.messages[rule] // add its message }); } 也可引入不同的模块进行转换来源： https://www.cnblogs.com/minty/p/11597680.html

JavaScript高级程序设计(十五)

阅读更多关于 JavaScript高级程序设计(十五)

表单脚本通过点击提交按钮提交表单时，浏览器会在将请求发送给服务器之前触发submit事件。这样，我们就有机会验证表单数据，并据以决定是否允许表单提交。阻止这个事件的默认行为就可以取消表单提交。在JavaScript中，以编程方式调用submit()方法也可以提交表单，以编程方式提交表单时，不会触发submit事件，因此要记得在调用此方法之前先验证表单数据。提交表单时可能出现的最大问题，就是重复提交表单。解决这一问题的办法有两个：在第一次提交表单后就禁用提交按钮，或者利用onsubmit事件处理程序取消后续的表单提交操作。与提交表单一样，也可以通过JavaScript来重置表单，但不同之处是，调用reset()方法会像单击重置按钮一样触发reset事件。重置表单的需求很少见。更常见的做法是提供一个取消按钮，让用户能够回到前一个页面。而不是不分青红皂白地重置表单中的所有值。使用focus()方法，可以将用户的注意力吸引到页面中的某个位置。例如，在页面加载完毕后，将焦点转移到表单中的第一个字段。在早期Web开发中，那时候的表单字段还没有readonly特性，就可以使用blur方法来创建只读字段。对于input和textarea元素，当它们从获得焦点到失去焦点且value值改变时，才会触发change事件。对于select元素，只要用户选择了不同的选项

jquery常用的插件1000收集

阅读更多关于 jquery常用的插件1000收集

花N长时间积累的Jquery插件，希望大家喜欢。大家还有什么新的插件，请留言，我们一并收录。感谢大家的支持。 1. accordion类基于jQuery开发，非常简单的水平方向折叠控件。 Horizontal accordion: jQuery 热点图书：www.hotbook.cn jQuery-Horizontal Accordion 具有XBOX360 blade界面风格的水平方向Accordion。 jQuery-Horizontal Accordion jQuery plugin: Accordion 用于创建折叠菜单的jQuery插件。 jQuery plugin: Accordion 热点图书：www.hotbook.cn Accordion Menu script 基于 jQuery开发的可折叠菜单。 Accordion Menu script 热点图书：www.hotbook.cn jQuery.combobox jQuery.combobox 是一个采用jQuery开发的combobox控件，可以使用CSS控制该combobox的外观，可以设置各种不同风格的下拉动画效果。 jQuery.combobox 热点图书：www.hotbook.cn 2. AutoComplete jQuery插件易于集成到现在的表单中(Form)。 AutoComplete

HTML面试常见问题

阅读更多关于 HTML面试常见问题

1. doctype的意义是什么？让浏览器以标准模式渲染让浏览器知道元素的合法性 2.html,xhtml,html5之间有什么关系？ HTML属于SGML XHTML属于XML（HTML是XML严格化的结果） HTML5不属于SGML或XML，比XHTML宽松 3.HTML5带来了哪些变化？新的语义化元素（section，nav，sidebar...）表单增强（html5验证）新的API（离线，音视频，canvas ，svg，本地存储）分类和嵌套的变更 4.em和i有什么区别？ em是语义化的标签，表强调 i 标签是纯样式化的标签，表示斜体，现在更多用于做icon html5中不推荐使用 i 标签，现在一般用于做icon 5.input标签的name属性有什么意义？ name 属性规定 <input> 元素的名称。 name 属性用于在 JavaScript 中引用元素，或者在表单提交后引用表单数据。注意：只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。 6.label标签的for属性有什么意义？ label可以通过for和<input type = "check" name ="xxx">的name进行绑定起到点击label时等同于点击了input的作用 7.通过ajax提交的情况下，是否需要form？ submit

Django Form表单组件

阅读更多关于 Django Form表单组件

Django Form表单组件 Form介绍我们之前在HTML页面中利用form表单向后端提交数据时，都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验，比如校验用户是否输入，输入的长度和格式等正不正确。如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误信息.。 Django form组件就实现了上面所述的功能。总结一下，其实form组件的主要功能如下: 生成页面可用的HTML标签对用户提交的数据进行校验保留上次输入内容普通方式手写注册功能 views.py # 注册 def register(request): error_msg = "" if request.method == "POST": username = request.POST.get("name") pwd = request.POST.get("pwd") # 对注册信息做校验 if len(username) < 6: # 用户长度小于6位 error_msg = "用户名长度不能小于6位" else: # 将用户名和密码存到数据库 return HttpResponse("注册成功") return render(request, "register.html", {"error_msg": error_msg})

jQuery提交表单验证移动端还是PC端

阅读更多关于 jQuery提交表单验证移动端还是PC端

写手在作画的夜晚，留下路人惊叹和大家分享一下一个表单提交的小案例好啦，就在这里了下面赋上代码 function toSubmit() { var source var isMobile = /Android|webOs|iPhone|iPad|BlackBerry/i.test(navigator.userAgent) if (isMobile) { source = 2 } else { source = 1 } var name = $("#card_name").val() var phoneNumber = $("#card_name1").val() var investRegion = $("#card_name3").val() console.log(source) $.ajax({ type: "POST", url: "/addPotentialInvestor", dataType: "json", contentType: 'application/json', data: JSON.stringify({ "name": name, "phoneNumber": phoneNumber, "investRegion": investRegion, "source": source.toString() }), success: function(res

web.py开发web 第七章 Formalchemy + Jinja2

阅读更多关于 web.py开发web 第七章 Formalchemy + Jinja2

formalchemy是一个强大的表单表格生成框架，几乎所有的动态web开发里都需要处理form表单，而form表单要处理的几个方面包括：表单展现，表单服务端验证，表单前端验证（既js验证），表单数据插入数据库。formalchemy在这几方面都做的非常好，特别是对掌控欲特别强又很懒的人来说：）。由于formalchemy是跟sqlalchemy是配套的（两者名字是如此相似），所以我们可以很好的与前面所创建的User表关联起来。这一章我们要解决的是关于form的展现，formalchemy自身支持三种 template engine ，分别是： moko ， genshi ， tempita ，除了mako我没用过，另外两个我都用过了，老实说，不怎么样，但是formalchemy为我们这种有需求的人提供了解决方案， customize templates ，这里我要介绍的就是用jinja2定制一个让我们随便玩的template engine，上代码。 customEngine.py #-*- coding:utf-8 -*- from formalchemy import templates from jinja2 import Environment,FileSystemLoader #定义一个方法用来获取formalchemy输出input的name属性 def field

订阅表单验证