vue.js基础知识篇(7):表单校验详解

目录

网盘

第12章:表单校验

1.npm安装vue-validator

$ npm install vue-validator

代码示例:

var Vue=require("vue");
var VueValidator=require("vue-validator");
Vue.use(VueValidator);

2.直接使用script标签引入vue.js

要下载vue-validator,那么进入cdn的地址https://cdn.bootcss.com/vue-validator/2.1.3/vue-validator.js把内容复制下来就好了。版本使用了2.1.3,不要搞错了哦。

下面是简单的小例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate>Zip: <input type="text" v-validate:zip="['required']"><br /><div><span v-if="$myForm.zip.required">Zip code is required.</span></div></form></validator></div><script src="js/vue.js"></script><script src="js/vue-validator.js"></script><script>new Vue({el:"#app",})</script>
</body>
</html>

将要验证的表单包裹在validator自定义元素指令中,而在要验证的表单控件元素的 v-validate 属性上绑定相应的校验规则。

验证结果会保存在组建实例的 $myForm 属性下。 $myForm 是由 validator 元素和 name 属性和 $ 前缀组件。

注意哦,这个校验在2.1.3版本并不依赖v-model指令。

3.验证结果的结构

使用上面的例子。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><form novalidate>Zip: <input type="text" v-validate:zip="['required']"><br /><div>{{$myForm |json}}</div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",})
</script>
</body>
</html>

 {{$myForm |json}} 显示的内容是:

{ "valid": false, "invalid": true, "touched": false, "untouched": true, "modified": false, "dirty": false, "pristine": true, "zip": { //zip字段的验证结果"required": true, "modified": false, "pristine": true, "dirty": false, "untouched": true,"touched": false, "invalid": true, "valid": false } 
}

这些校验属性分别是什么意思:

valid:字段校验是否通过

invalid:取反、

touched:校验字段所在元素获得过焦点返回truke,否则返回false

untouched:touched取反

modified:当元素值与初始值是否相同

dirty:字段值改变过至少一次返回true,否则返回false

pristine:dirty取反

表单整体校验单独的属性:

errors:如果整体校验没通过,则返回错误字段信息数组。否则返回undefined。

 4.验证器语法

v-validate[:field]="array literal | object literal| bind"

(1)校验字段名field

vue-validator版本小于2,校验依赖于v-model指令。2.0之后的版本使用v-validate指令。字段的命名可使用连字符(-),然后通过驼峰式命名法引用它。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><h1>1.校验的字段为user-name,校验的规则是最小长度6,最大长度12</h1><input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/><div><span v-show="$myForm.userName.minlength">Your comment is too short.</span><span v-show="$myForm.userName.maxlength">Your comment is too long.</span></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",})
</script>
</body>
</html>

动态绑定校验字段:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><p v-for="field in fields"><label :for="field.id">{{field.label}}</label><!--v-bind:for绑定for属性的简写--><input type="text" :id="filed.id" :placeholder="field.placeholder"field="{{field.name}}" v-validate="field.validate"/></p></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",data:{fields:[{id:"username",label:"username",name:"username",placeholder:"input your username",validate:{required:true,maxlength:16}}]}})
</script>
</body>
</html>

(2)校验规则定义

第一种,数组字面量。

类似如下代码:

Zip: <input type="text" v-validate:zip="['required']">

第二种,对象字面量。

类似如下代码:

<input type="text" v-validate:user-name="{minlength:6,maxlength:12}"/>

对象字面量还可以通过rule字段自定义验证规则。

<input type="text" v-validate:user-name="{minlength:6,maxlength:{rule:12}"/>

第三种,实例数据属性。

v-validate的值可以是组件实例的数据属性,可用来动态绑定检验规则。其实就是把校验的字段换成变量,比较简单。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><h1>1.校验的字段为id,校验的规则是最小长度6,最大长度12</h1><input type="text" v-validate:id="rules"/><div><span v-show="$myForm.id.minlength">Your comment is too short.</span><span v-show="$myForm.id.maxlength">Your comment is too long.</span></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",data:{rules:{minlength:3,maxlength:6}}})
</script>
</body>
</html>

第四种,与terminal指令(比如v-if、v-for)同时使用。

Vue 通过递归遍历 DOM 树来编译模块。但是当它遇到 terminal 指令时会停止遍历这个元素的后代元素。这个指令将接管编译这个元素及其后代元素的任务。v-if 和 v-for 都是 terminal 指令。因为v-validate指令不能与terminal指令同时使用,所以包裹在了div元素中。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><h1>1.可以看到,v-if指令包裹在div元素里,并没有和v-validator指令同时使用</h1><div  class="password"><label for="password">password:</label><input  id="password" type="password" v-validate:password="['required']"/><br/>{{$myForm|json}}</div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",data:{enable:true}})
</script>
</body>
</html>

那么如果使用错误的代码:

<div  class="password"><label for="password">password:</label><input v-if="enable" id="password" type="password" v-validate:password="['required']"/><br/>{{$myForm|json}}
</div>

控制台会报错

另:可自动校验通过v-model动态设置的值。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate>Zip: <input type="text" v-model="zip" v-validate:zip="['required']"><br /><div>是否错误:{{$myForm.zip.required}}</div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>var  vm=new Vue({el:"#app",data:{zip:""}});setTimeout(function(){vm.zip="hello world!";},2000)
</script>
</body>
</html>

显示结果,等待两秒之后,我们就看到v-model的值被设置上去,而且根据必填的规则,报错信息显示false。

5.内置验证规则有哪些?

(1)required校验器适用的元素有input的text、radio、checkbox、number、password、email、tel、url、还有select、textarea。

对应的源码如下:

function required(val) {if (Array.isArray(val)) {if (val.length !== 0) {var valid = true;for (var i = 0, l = val.length; i < l; i++) {valid = required(val[i]);if (!valid) {break;}}return valid;} else {return false;}} else if (typeof val === 'number' || typeof val === 'function') {return true;} else if (typeof val === 'boolean') {return val;} else if (typeof val === 'string') {return val.length > 0;} else if (val !== null && (typeof val === 'undefined' ? 'undefined' : babelHelpers.typeof(val)) === 'object') {return Object.keys(val).length > 0;} else if (val === null || val === undefined) {return false;}}

它是通过typeof判断各个类型的。

(2)pattern是正则匹配校验器,适用的元素有text、number、password、email、tel、url类型的input和textarea。

/*** pattern** This function validate whether the value matches the regex pattern** @param val* @param {String} pat* @return {Boolean}*/function pattern(val, pat) {if (typeof pat !== 'string') {return false;}var match = pat.match(new RegExp('^/(.*?)/([gimy]*)$'));if (!match) {return false;}return new RegExp(match[1], match[2]).test(val);}
正则匹配的源码

(3)minlength是最小长度校验器,适用的元素有text、checkbox、number、password、email、tel、url类型的input和select、textarea。

(4)maxlength是最大长度校验器,适用的元素有text、checkbox、number、password、email、tel、url类型的input和select、textarea。

(5)min是最小长度校验器,适用的元素有text、number类型的input和textarea。

(6)max是最小长度校验器,适用的元素有text、number类型的input和textarea。

6.重置校验结果

Vue组件实例上调用$resetValidation()方法来动态重置校验结果。

 

7.checkbox、radio和select的使用例子

checkbox的DEMO:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><div>你喜欢哪一种水果?</div><div>苹果:<input id="apple" type="checkbox"value="apple" v-validate:fruits="{required:{rule:true,message:requiredErrorMsg},maxlength:{rule:1,message:maxlengthErrorMsg},minlength:{rule:2,message:minlengthErrorMsg}}"/></div><div>橘子:<input id="orange" type="checkbox"value="orange" v-validate:fruits/></div><div>葡萄:<input id="grape" type="checkbox"value="grape" v-validate:fruits/></div><div>香蕉:<input id="banana" type="checkbox"value="banana" v-validate:fruits /></div><div>{{$myForm.fruits.errors|json}}</div><ul class="errors"><li v-for="msg in $myForm.fruits.errors">{{msg.message}}</li></ul></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",computed:{requiredErrorMsg:function(){return "Required fruit!!"},minlengthErrorMsg:function(){return "please choose at least 1 fruit!!"},maxlengthErrorMsg:function(){return "please choose at most 2 fruits!!"}}})
</script>
</body>
</html>

单选按钮的demo:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><div>你喜欢哪一种水果?</div><div>苹果:<input id="apple" type="radio"value="apple" v-validate:fruits="{required:{rule:true,message:requiredErrorMsg}}"/></div><div>橘子:<input id="orange" type="radio"value="orange" v-validate:fruits/></div><div>葡萄:<input id="grape" type="radio"value="grape" v-validate:fruits/></div><div>香蕉:<input id="banana" type="radio"value="banana" v-validate:fruits /></div><div>{{$myForm.fruits.errors|json}}</div><ul class="errors"><li v-for="msg in $myForm.fruits.errors">{{msg.message}}</li></ul></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",computed:{requiredErrorMsg:function(){return "Required fruit!!"}}})
</script>
</body>
</html>

没有选择任何选项就会报错:

下拉列表select的DEMO:

 v-validate指令使用在select标签上。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><form novalidate><select v-validate:city="{required:true}"><option value="">请选择你最喜欢的内地城市</option><option value="beijing">北京</option><option value="shanghai">上海</option><option value="chengdu">成都</option><option value="hangzhou">杭州</option><option value="suzhou">苏州</option><option value="shenzhen">深圳</option></select><div v-if="$myForm.city.required">required</div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app"})
</script>
</body>
</html>

8.校验状态和分组校验

(1)各校验状态对应的class

valid对应的class是valid。

invalid对应的class是invalid。

touched对应的class是touched。

untouched对应的class是untouched。

pristine对应的class是pristine。

dirty对应的class是dirty。

modified对应的class是modified。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><form novalidate><input id="username" type="text" v-validate:username="{required:{rule:true,message:'require your name!'}}"/></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app"})
</script>
</body>
</html>

上面的代码 <input id="username" type="text" v-validate:username="{ 代码在页面初始化之后,会给input添加上一些类名,如下截图:

(2)自定义校验状态class

使用classes属性,他只能用在validator属性上或者使用了v-validate的元素上。

<validator name="myForm" :classes="{touched:'touched-validator',dirty:'dirty-validator'">

(3)在v-validate指令的包裹元素使用校验状态

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm" :classes="{touched:'touched-validator',dirty:'dirty-validator'}"><form novalidate><div v-validate-class class="username"><input id="username" type="text" v-validate:username="{required:{rule:true,message:'require your name!'}}"/></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app"})
</script>
</body>
</html>

只是在div上使用了v-validate-class,校验状态在页面初始化之后就可以看到一些类名了。

(4)分组校验

vue-validator支持分组校验。如输入密码时,可以将第一次输入密码与再次输入密码的确认放入同一个校验组内,只有两次校验都通过了,该组校验才算通过。validator元素使用groups属性,要校验的input框使用group属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm" :groups="['passwordGroup']"><div>password:<input type="password" group="passwordGroup"v-validate:password="{minlength:4,required:true}"/></div><div>confirm:<input type="password" group="passwordGroup"v-validate:password-confirm="{minlength:4,required:true}"/><div>passwordGroup校验:{{$myForm.passwordGroup.valid}}</div></div><!--只有password和confirm都通过校验,表单的密码组才会通过校验--></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app"})
</script>
</body>
</html>

9.validator-errors组件的使用

在之前的例子中使用v-for指令来遍历输出错误信息。其实vue-validator提供了validator-errors组件能更便捷的输出错误信息的。

使用方法:validator-errros指令,提供动态绑定的validation属性就好了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><form novalidate><div>username:<input id="username" type="text" v-validate:username="{required:{rule:true,message:'require your name!'}}"/></div><div class="errors"><validator-errors :validation="$myForm"></validator-errors></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app"})
</script>
</body>
</html>

页面初始化后的显示结果:

不喜欢默认的错误信息模板,可以自定义。

(1)component模板

除了使用validator-errors指令,动态绑定validation属性,还要绑定component组件。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><form novalidate><div>username:<input id="username" type="text" v-validate:username="{required:{rule:true,message:'require your name!'}}"/></div><div class="errors"><validator-errors :validation="$myForm" :component="'custom-error'"></validator-errors></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>Vue.component("custom-error",{props:['field','message'],//这里的属性可以使用filed,validator,message
        template:"<p>{{field}}报错信息:<span style='color:red;'>{{message}}</span></p>"})new Vue({el:"#app"})
</script>
</body>
</html>

显示效果为:

(2)partial模板

除了使用validator-errors指令,动态绑定validation属性,还要提供partial属性。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><form novalidate><div>username:<input id="username" type="text" v-validate:username="{required:{rule:true,message:'require your name!'}}"/></div><div class="errors"><validator-errors :validation="$myForm" partial="myErrorTemplate"></validator-errors></div></form></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>Vue.partial("myErrorTemplate","<p>报错信息:<span style='color:red;'>{{message}}</span></p>")new Vue({el:"#app"})
</script>
</body>
</html>

10.动态设置错误信息

在服务端验证失败时,可使用组件实例方法$setValidationErrors动态设置错误信息。

类似的伪代码如下:

new  Vue({el:"#app",data:{},methods:{onSubmit:function(){var self=this;var resource=this.$resource("/user/:id");resource.save({id:this.id},{username:this.username,password:this.new},function(data,stat,req){self.$.setValidationErros();}}}

11.校验事件

(1)单个字段校验事件

每个v-validate的所在元素都可以监听如下事件,无非就是用v-on来帮顶咯。

valid——当字段验证结果变为有效时触发。

invalid——当字段验证结果变为无效时触发。

touched——当字段失去焦点时触发。

dirty——当字段首次变化时触发。

modified——当字段值与初始值不同时或变回初始值时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="app"><validator name="myForm"><div>comment:<input type="text" @valid="onValid" v-validate:comment="['required']"</div></validator></div><script src="js/vue.js"></script><script src="js/vue-validator.js"></script><script>new Vue({el:"#app",methods:{onValid:function(){console.log("valid事件触发了");}}})</script>
</body>
</html>

(2)整个表单校验事件

对validator元素使用v-on绑定。

valid——当字段验证结果变为有效时触发。

invalid——当字段验证结果变为无效时触发。

touched——当字段失去焦点时触发。

dirty——当字段首次变化时触发。

modified——当字段值与初始值不同时或变回初始值时触发。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator @valid="onValid" name="myForm"><div>comment:<input type="text"  v-validate:comment="['required']"/></div><div>username:<input type="text"  v-validate:username="['required']"/></div></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>new Vue({el:"#app",methods:{onValid:function(){console.log("表单验证合法");}}})
</script>
</body>
</html>

12.异步验证

(1)注册异步验证器

PS:有同学说异步验证这一块不是很理解,我解释一下。传统的异步验证使用ajax,当填写数据的时候,就发送请求告诉你错误了或者正确了,常用的场景是验证码填写。因为我这里是纯前端代码,所以异步就直接使用了settimeout来表示了,那么我的demo的思路是如果我的随机数大于0.5,就是ajax返回校验成功,否则ajax返回校验失败。从前端显示看,跟真实生产环境的样子是差不多的,而且我简化了是console打印。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><validator name="myForm"><div>user:<input type="text"  v-validate:user="['exist']"/></div><p  v-show="$validation.user.exist">the user is already registered.</p></validator>
</div>
<script src="js/vue.js"></script>
<script src="js/vue-validator.js"></script>
<script>Vue.validator("exist",function(val){return function(resolve,reject){setTimeout(function(){var r=Math.random();console.log(r);if(r>0.5){resolve();console.log("异步校验成功");//异步校验通过
                }else{reject();console.log("校验失败");}},500)//返回值为promise对象
        }})new Vue({el:"#app",methods:{},data:{user:""}})
</script>
</body>
</html>

这里的return function等于如下代码:

var promise=new Promise(function(resolve,reject){setTimeout(function(){var r=Math.random();console.log(r);if(r>0.5){resolve();console.log("异步校验成功");//异步校验通过}else{reject();console.log("校验失败");}},500);return promise;
});

(2)验证器函数context

vm属性。暴露了当前验证所在的vue实例。

el属性。暴露了当前验证器的目标DOM元素。

new Vue({data(){return {checking:false});validators:{phone:function(val){$(this.el)//暴露了当前验证器的目标DOM元素
         },exist(val){this.vm.checking///暴露了当前验证所在的vue实例。
        }}});

转载于:https://www.cnblogs.com/chenmeng2062/p/6916499.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/370173.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

修改linux绑定的域名,手工修改linux系统下DA面板绑定的域名

举例说明手工修改DA面板下虚拟主机ryan绑定的域名&#xff0c;只需要 vi /usr/local/directadmin/data/users/ryan/httpd.conf代码如下&#xff1a;# Auto generated apache config file by DirectAdmin version 1.46.3# Modifying this file is not recommended as any change…

在JUnit测试中使用Builder模式

这并不是要成为技术含量很高的职位。 这篇文章的目的是为您提供一些指导&#xff0c;以使您的JUnit测试生活更加轻松&#xff0c;使您能够在几分钟内编写复杂的测试场景&#xff0c;并具有易于阅读的测试优势。 单元测试中有两个主要部分&#xff0c;需要编写许多引导程序代码&…

SQL数据库中临时表、临时变量和WITH AS关键词创建“临时表”的区别

原文链接&#xff1a;https://www.cnblogs.com/zhaowei303/articles/4204805.html SQL数据库中数据处理时&#xff0c;有时候需要建立临时表&#xff0c;将查询后的结果集放到临时表中&#xff0c;然后在针对这个数据进行操作。 创建“临时表”&#xff08;逻辑上的临时表&…

python 三维绘图库_Python第三方库matplotlib(2D绘图库)入门与进阶

Matplotlib一 简介&#xff1a;Matplotlib是一个Python 2D绘图库&#xff0c;它可以在各种平台上以各种硬拷贝格式和交互式环境生成出具有出版品质的图形。 Matplotlib可用于Python脚本&#xff0c;Python和IPython shell&#xff0c;Jupyter笔记本&#xff0c;Web应用程序服务…

zbb20170626 myeclipse 2017 ci 构建 spring hibernate struts jar

转载于:https://www.cnblogs.com/super-admin/p/7081209.html

linux处理机调度实验报告,模拟Linux操作系统下处理机调度实验报告

在采用多道系统的设计程序中,往往有若干进程同时处于就绪状态。当就绪状态进程数大于处理机数时,就必须按照某种策略来决定哪些进程优先占用处理机。本实验模拟在单处理机情况下处理机调度处理机调度一、实验目的&#xff1a;1、了解Linux下Emacs编辑器的使用方法&#xff0c;掌…

Java线程:保留的内存分析

本文将为您提供一个教程&#xff0c;使您可以确定活动应用程序Java线程保留Java堆空间的数量和位置。 将提供来自Oracle Weblogic 10.0生产环境的真实案例研究&#xff0c;以使您更好地理解分析过程。 我们还将尝试证明过多的垃圾回收或Java堆空间的内存占用问题通常不是由真正…

软件测试白皮书-等价类

设有一个档案管理系统&#xff0c;要求用户输入以年月表示的日期。假设日期限定在1990年1月~2049年12月&#xff0c;并规定日期由6位数字字符组成&#xff0c;前4位表示年&#xff0c;后2位表示月。现用等价类划分法设计测试用例&#xff0c;来测试程序的"日期检查功能&qu…

深入css布局 (1) — 盒模型 元素分类

深入css布局&#xff08;1&#xff09;—— 盒模型 & 元素分类 “ 在css知识体系中&#xff0c;除了css选择器&#xff0c;样式属性等基础知识外&#xff0c;css布局相关的知识才是css比较核心和重要的点。今天我们来深入学习一下css布局相关的知识。” 首先来列下大纲 盒模…

批改网禁止粘贴怎么破_教育部对家长批改作业表态了,明令禁止!你怎么看?...

互联网的发展&#xff0c;的确方便了现代人生活。视频电话、出去买东西你都不用带钱带卡&#xff0c;手机一扫就可以完成支付。很多中小学的家长都会建一个家长群&#xff0c;方便老师和家长的沟通。这个群可以说是家长和学校的桥梁和纽带&#xff0c;家长们为了支持老师的工作…

电子科大专科c语言作业1,电子科大15春《C语言(专科)》在线作业试卷.docx

电子科大 15 春《 C 语言(专科)》在线作业一、单选题(共20 道试题&#xff0c;共100 分。)1.对于 int*p;inta[];pa;的合法运算 ()a;pa;p; 相当于 a;p; 相当于 a[1];若 p 中的地址为 100 则 p; 运算后&#xff0c;则其值为 100-----------------选择&#xff1a; C已知 intb; 则…

MapReduce算法–顺序反转

这篇文章是介绍MapReduce算法的系列文章的另一部分&#xff0c;该书在使用MapReduce进行数据密集型文本处理中找到。 先前的文章是Local Aggregation &#xff0c; Local Aggregation PartII和创建共现矩阵 。 这次我们将讨论阶数反转模式。 顺序反转模式利用的MapReduce来计算…

xss防御

http://blog.csdn.net/ghsau/article/details/17027893转载于:https://www.cnblogs.com/jiangjing/p/8076216.html

移动端页面字体在微信被放大,导致排版错乱

在开发微信页面的时候&#xff0c;之前一直没有测出这个问题。直到某天领导的手机出现了排版错位的问题&#xff0c;拿着手机质问我的工作态度。 Google了一下发现原来微信调整了字体大小会放大网页的字体&#xff0c;导致排版混乱。通过设置可以禁止网页字体被放大&#xff1a…

液压支架销轴力学计算分析研究_基于RFID射频精准定位的智能开采研究与应用...

一、项目背景近年来随着智能开采技术的不断发展&#xff0c;装备和新工艺不断更新换代,在智能开采中&#xff0c;对采煤机位置的精准定位是能否实现智能开采的关键&#xff0c;只有准确无误地获取煤机的准确位置&#xff0c;才能实现工作面的智能化开采&#xff0c;进而提高生产…

cf 821E Okabe and El Psy Kongroo(矩阵快速幂)

链接&#xff1a;http://codeforces.com/problemset/problem/821/E 分析&#xff1a;由于有边界而且不同段边界还不同&#xff0c;直接算是不行的。。k是1e18&#xff0c;dp也不行。。用一个16维的向量表示某一列16个位置可能的种类数&#xff0c;到下一列的转移矩阵容易得到&a…

您是否能及时编译?

还记得上次被C开发人员嘲笑的时候吗&#xff1f; Java如此繁琐&#xff0c;以至于他们甚至都不会考虑使用这种语言&#xff1f; 在许多方面&#xff0c;这一概念仍然成立。 但是对于典型的用法&#xff08;在大型企业的骨干中&#xff09;&#xff0c;Java性能绝对可以与许多竞…

C语言作业二选择结构,C语言第二次作业参考答案选择结构.pdf

1 C 语言第二次作业(选择结构)参考答案语言第二次作业(选择结构)参考答案 1、某年如果能被某年如果能被 4 整除整除&#xff0c;&#xff0c;但不能被但不能被 100 整除整除&#xff0c;&#xff0c;或者能被或者能被 400 整除的整除的 年是闰年。判断从键盘输入的年份是否为闰…

2d物理引擎01

我一直想做一个游戏&#xff0c;但一直感觉自己水平不够 想了想觉得不去做的话就永远做不出来 所以有了这个博文 01 我需要一个东西来显示&#xff0c;很显然h5中canvas是很好的选择 <!DOCTYPE html> <html><head><meta charset"utf-8" />&l…

python结课设计力学方面_我对力学教案的评价

这是来自某教学网站的高一物理力学教案&#xff1a;[高一物理教案1.1.1]第一章 力1&#xff0e;1 力一、教学目标1&#xff0e;知识目标⑴知道力是物体对物体的作用&#xff0c;力不能脱离物体而存在&#xff1b;能正确找出受力物体和施力物体。⑵知道力是有方向的量&#xff…