表单验证

你都做过什么项目呢?具体聊某一个项目中运用的技术.

戏子无情 提交于 2020-04-06 17:24:40
注意:用心找自己做的项目中自己感觉最拿出来手的(复杂度最高,用的技术最多的项目),描述的时候尽可能往里面添加一些技术名词 布局我们用html5+css3 我们会用reset.css重置浏览器的默认样式 JS框架的话我们选用的是jQuery(也可能是Zepto) 我们用版本控制工具git来协同开发 我们会基于gulp搭建的前端自动化工程来开发(里面包含有我们的项目结构、我们需要引用的第三方库等一些信息,我们还实现了sass编译、CSS3加前缀等的自动化) 我们的项目中还用到了表单验证validate插件、图片懒加载Lazyload插件 来源: https://www.cnblogs.com/Rivend/p/12642745.html

12.HTML表单元素【下】

一世执手 提交于 2020-04-05 19:58:19
第十章 表单元素【下】 一、其他元素 1 、 select :生成一个下拉列表进行选择; 额外属性: ( 1 ) name :设定提交的名称; ( 2 ) disabled 将下拉列表禁用; ( 3 ) form 将表单外的下拉列表与某个表单挂钩; ( 4 ) size 设置下拉列表的高度; ( 5 ) multiple 设置是否可以多选; 例、 <select name="fruit"> <option value="1"> 苹果 </option> // 动态数组存储时,储存的不是汉字,而是 value 值。 <option value="2"> 香蕉 </option> <option value="3"> 橘子 </option> </select> 2 、 optgroup : 对 select 元素进行编组; //<select name="fruit"> <optgroup label=" 水果 "> 。。。 </optgroup> label 为分组名称; // <optgroup label=" 高粱 " selected> 。。。 </optgroup> selected 为默认选项 </select> 3 、 option : select 元素中的项目; 4 、 textarea :生成一个多行文本框; 属性如下: ( 1 ) name : 设定提交时的名称

HTML5学习(12)表单元素

被刻印的时光 ゝ 提交于 2020-03-30 07:44:04
HTML5 <datalist> 元素 <datalist> 元素规定输入域的选项列表。 <datalist> 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项: 使用 <input> 元素的列表属性与 <datalist> 元素绑定 < input list = " browsers " > < datalist id = " browsers " >   < option value = " Internet Explorer " >   < option value = " Firefox " >   < option value = " Chrome " >   < option value = " Opera " >   < option value = " Safari " > </ datalist > 实例地址: https://www.runoob.com/try/try.php?filename=tryhtml5_datalist HTML5 <keygen> 元素 <keygen> 元素的作用是提供一种验证用户的可靠方法。 <keygen>标签规定用于表单的密钥对生成器字段。 当提交表单时,会生成两个键,一个是私钥,一个公钥。 私钥(private key)存储于客户端,公钥

Layui表单赋初值之 checkbox

帅比萌擦擦* 提交于 2020-03-29 19:24:01
问题来源 上回书说到,Layui 在提交表单时对 checkbox 进行验证,这次依旧是 checkbox ,跟它杠上了。 在网页中有很多时候会用到表单赋初值,Layui 给我们提供了非常便利的方法: form.val() ,但是,这个方法是有一定局限的,例如在使用这个方法给 checkbox 赋初值时就没有成功(至少我没有),但是我又需要用到,Google 也没找到觉得合适的答案,大多数都说这个需要自行扩展,所以... 解决方法 毫无疑问,最终还是自行扩展,代码: (假设 HTML 代码还是上一篇文章写到的代码,不知道?没关系,Link: Layui提交表单时验证必选的多选框是否有选中 ) // 假设 data 是后台获取的值,数组中的值是与 checkbox 的 value 对应的 let data = [1, 2, 3, 4]; $.each(data, (v) => { // 获取 type 为 checkbox,name 以 test 开关,value 为 v 的元素 let node = $(`input[type="checkbox"][name^="test"][value="${v}"]`); if (node && node.length) { // 如果元素存在,使其选中 node[0].checked = true; // 这个不能忘了 form

JS-表单验证

妖精的绣舞 提交于 2020-03-29 06:59:55
表单验证需求: 1、所有表单项需要即时验证,最好是用户写一个验证一个 2、所有表单项当验证失败的时候提示错误消息,并且错误消息显示到组建的后面,红色字体,要求12号 3、当表单验证成功之后不提示消息 4、当只要表单项验证失败,阻止其提交表单 5、用户名不能为空 6、用户名长度必须在6-14位 7、密码和确认密码必须一致 注意:blur:失去焦点 focus:获取焦点 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="Generator" content="EditPlus®"> 6 <meta name="Author" content=""> 7 <meta name="Keywords" content=""> 8 <meta name="Description" content=""> 9 <title>表单验证</title> 10 </head> 11 <body> 12 <!-- 13 //name属性取消之后提交表单时则不会提交这个数据 14 --> 15 <script type="text/javascript"> 16 function checkName(userName){ 17 var ok=true; 18 var userName

JS表单验证

强颜欢笑 提交于 2020-03-29 06:59:07
HTML部分代码:         CSS样式:     消息提示框样式:        JS正则表达式代码:     电话:          邮箱:             密码:          再次输入密码验证:             整个表单页面验证:            完整代码:      <!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title>注册练习</title> <link rel="stylesheet" href="dist/css/bootstrap.min.css"/> <style> .err{ color: red; font-size: 12px; height: 16px; padding-left: 40px; margin-top: 10px; } </style></head><body> <div> <h3>注册</h3> <form action="#" method="post" id="myform"> <p> 手机:<input type="text" name="mobile" id="phone" onblur="mobiles(this)" /><span class="err" id="mobile"></span> </p> <p>

HTML5中的表单

好久不见. 提交于 2020-03-28 17:44:40
相对于 HTML4 来说,HTML5中的元素与特性提供更大程度上的语义标记,同时还删除了大量在 HTML4 中因为脚本与样式缘故而存在的冗余元素。通过让表单在不同网站上表现的更加一致,及时响应用户输入的数据,HTML5的表单特性为用户提供了更好的使用体验。这些体验同样适用于那些禁用了浏览器脚本的用户。 这个话题会描述那些被 Gecko/Firefox4 或更高版本所支持的一些新特性或者改变的部分。 <input> 元素 <input> 的 type 特性拥有更多的值. search: 这个元素呈现为一个搜索框。换行符会从输入值中去掉,此外没有其他的语法增强了。 tel: 这个元素可现为一个编辑电话号码的输入控件。换行符会从输入值中去掉,此外没有其他的语法增强了,因为电话号码国际化差异非常明显。你可以使用如 pattern 与 maxlength 等属性来限制输入到控件中的值。 url: 这个元素呈现为一个编辑URL 的输入控件。换行符与首尾的空格将会被自动去除。 email: 这个元素呈现为一个邮件地址。换行符会被自动去除。可以设置一个无效的邮件地址,但若满足输入框的限制,必须遵守在扩展的巴科斯范式(ABNF)中的规范:1 ( atext / "." ) "@" ldh-str 1 ( "." ldh-str ) 其中atext 在规范RFC 5322 section 3.2.3

input 的 pattern 验证表单

白昼怎懂夜的黑 提交于 2020-03-27 09:04:07
pattern 用于定义验证输入正则表达式 pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 需要注意的是:input的正则表达式是不需要使用 \ 来转义特殊字符的,这和js里面的正则表达式有所区别,转义了反而会报错 可以使用 title 属性来描述正则表达式,这样在浏览器验证表单是就会按title描述来提示错误消息 使用title虽然会有提示,但提示语前面会附加 “请匹配要求的格式”。如果浏览器是中文,提示语是英文,就会感觉怪怪的 这时我们可以通过setCustomValidity方法来自定义提示信息,更准确的提示给用户,但因为设置了setCustomValidity后如果不手动取消,表单就会一直提示有错误消息而无法提交,所以需要写一段js代码 <script type="text/javascript"> function vali(obj) { if (obj.validity.patternMismatch === true) { obj.setCustomValidity($(obj).prop('title')); } else { obj.setCustomValidity(''); } } </script> <input type="text" pattern="

Django中Form表单之字段详解

六月ゝ 毕业季﹏ 提交于 2020-03-26 18:55:47
Django中的Form表单   1、背景     平时我们在书写form表单时,经常都是手动的去写一些input标签,让用户输入一些功能,进行一些校验的判断,等等。Django中的form表单就能够帮我们去实现这些功能,比较便捷。   2、Django form表单的功能       1、生成页面可执行的HTML标签       2、对应户的数据进行校验       3、保留上次输入的内容   3、先用普通方式手写一个注册功能     1、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})     2

linux入门系列19--数据库管理系统(DBMS)之MariaDB

左心房为你撑大大i 提交于 2020-03-26 09:50:31
前面讲完Linux下一系列服务的配置和使用之后,本文简单介绍一款数据库管理系统(MySQL的兄弟)MariaDB。 如果你有MySQL或其他数据的使用经验,MariaDB使用起来将非常轻松。 本文讲解Centos7默认的数据MariaDB,由于是入门系列文章因此不会深入讲解,后面有机会在单独深入。 一、MariaDB产生背景 数据处理是软件的核心,软件的本质就是处理数据,包括输入输入、处理、输出。目前数据库主要分为关系型数据库和非关系型数据,关系型数据库主要有:SQLServer、Oracle、MySQL、MariaDB等;非关系型数据库(NoSQL)包含:Redis、HBase、MongoDB等等。 相信大家都听过或者用过MySQL数据库,它是一款市场占有率非常高的数据库管理系统,技术成熟、配置步骤相对简单,而且具有良好的可扩展性。 但是由于Oracle公司在2009年收购了MySQL的母公司Sun,因此MySQL项目也随之纳入了Oracle。被收购后,虽然MySQL仍然保持着开源软件的身份,但是却申请了多项商业专利,这就不禁让人担心其会被逐渐商业化。 一方面,MySQL本身是一款开源软件,是全球极客、程序员等技术高手在开源社区的大旗下的公共智慧结晶,自己的劳动成果被其他公司商业化自然也伤了一大批开源工作者的心