1、首先我们要设置表单的验证规则
2、然后根据表单的验证规则定义要显示验证消息，
3、最后通过JavaScript 和CSS相结合先将所有预定义的验证消息隐藏掉，然后再根据表单中的输入是否符合验证规则来控制验证消息的显隐状态。
下面我们就来通过一个具体的示例进行讲解，你可以将这个示例直接放在浏览器中运行查看效果，但是要注意代码中引用了第三方类库jQuery，运行时你要自己设置一下：
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>Forms: 验证提示</title>
// 设置一些必要的样式，如验证消息的文字样式和控制验证消息显隐的样式
<style>
input:valid {
background: #fff;
}
input:invalid {
background: #fcc;
color: #333;
}
validation-messages {
margin-bottom:15px;
}
validation-messages span {
font-size:08em;
background-color:#eee;
padding:6px;
border:1px solid #ccc;
border-radius:10px;
color:#666;
}
//所有class属性为hide的元素都会被隐藏
hide {
display:none;
}
</style>
</head>
<body>
<article>
<h1>Forms<span> - 验证提示</span></h1>
</article>
<div id="result-stub" class="well hidden">
<form id="change-email-form" name="change-email-form">
<fieldset>
<h4>修改邮箱地址</h4>
//设置表单应该遵循的验证规则。
//pattern 属性：规定用于验证输入字段的模式。
//maxlength 属性：规定输入字段的最大长度,以字符个数计。
//required属性：规定该input元素为必须的元素。
<label>用户名:</label>
<input type="text" name="username"
id="username" pattern="[a-zA-Z ]{5,}"
maxlength="30" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
//这里的data-rule的属性值是HTML5表单中内置的验证规则中的一种
<span data-rule="valueMissing"
class="hide">用户名不能为空</span>
<span data-rule="patternMismatch"
class="hide">必须是字母字符(长度应为5~30个字符)</span>
</div>
<label>邮箱地址:</label>
//设置表单应该遵循的验证规则。
<input type="email" name="email" id="email"
title="Email address is required" required />
//设置表单的验证消息，并结合class属性样式将其隐藏起来
<div>
<span data-rule="valueMissing">
邮箱地址不能为空</span>
<span data-rule="typeMismatch">
邮箱格式不正确</span>
</div>
<hr />
//设置两个按钮，作用分别是“清空表单内容和对表单中的内容进行验证
<button type="submit" id="submit"
name="submit">修改</button>
<button type="button" id="checkValidation"
name="checkValidation"
class="btn">验证</button>
</fieldset>
</form>
</div>
<script>
windowonload= function() {
//---
// 创建一个验证规则容器。
var ruleNames = [];
// 填充验证规则容器
// 寻找所有具有验证规则的元素，然后将该元素的data-rule属性值添加到验证规则数组中去。
$("[data-rule]")each(function(i, element) {
var ruleName = elementgetAttribute('data-rule');
if ($inArray(ruleName, ruleNames) < 0) {
ruleNamespush(ruleName);
}
});
var
// 首先确定用户界面隐藏了所有验证消息。
// 然后在选定的表单上运行验证规则。
validate = function() {
$("validation-messages span")
addClass('hide');
documentgetElementById('change-email-form')
checkValidity();
},
// 查询每个输入的元素，以确定哪个元素无效。
// 一旦检测到无效元素，就遍历验证规则，找到无效的原因，然后通过消息对用户进行提示
validationFail = function(e) {
var
element = esrcElement,
validity = elementvalidity;
if (!validityvalid) {
ruleNamesforEach(function(ruleName) {
checkRule(validity,
ruleName,
element);
});
epreventDefault();
}
},
// 使用 input 元素 的ValidityState 对象的实例来运行验证规则。
//如果这个验证规则返回ture，就表示无法通过验证，在表单中就会有相应的提示信息。
checkRule = function(state, ruleName, ele) {
if (state[ruleName]) {
$(ele)next()
find('[data-rule="'
+ ruleName + '"]')
removeClass('hide');
}
};
// 所有验证事件处理程序是附加在input元素上的而不是button元素
$(':input:not(:button)')each(function() {
thisoninvalid = validationFail;
thisonblur = validate;
});
$('#checkValidation')click(validate);
}
</script>
<script src="/js/jqueryjs"></script>
</body>
</html>1、下载金山文档APP。
2、选择使用微信登录。
3、设置姓名。
4、更改成自己的大名。
5、开始创建表单。
6、点击表单图标。
7、点击表单样式选择复制已有表单。CSRF攻击，全称为“Cross-site request forgery”，中文名为跨站请求伪造，也被称为“One Click
Attack”或者“Session Riding”，通常缩写为CSRF或者XSRF，是一种对网站的恶意利用。
XSS主要是利用站点内的信任用户，而CSRF则通过伪装来自受信任用户的请求，来利用受信任的网站。与XSS相比，CSRF更具危险性。
CSRF攻击的危害
主要的危害来自于攻击者盗用用户身份，发送恶意请求。比如：模拟用户发送邮件，发消息，以及支付、转账等。
如何防御CSRF攻击
1、重要数据交互采用POST进行接收，当然POST也不是万能的，伪造一个form表单即可破解。
2、使用验证码，只要是涉及到数据交互就先进行验证码验证，这个方法可以完全解决CSRF。
3、出于用户体验考虑，网站不能给所有的 *** 作都加上验证码，因此验证码只能作为一种辅助手段，不能作为主要解决方案。
4、验证>
跨站请求伪造（又被称为 CSRF 或者 XSRF ），它源自一个域网站向另一个域网站发起请求的简单功能。攻击者通过一些技术手段欺骗用户使用浏览器去访问一个自己曾经认证过的网站并执行一些敏感 *** 作（如转账）。
一个域网站向另一个域的网站发起请求的方式有很多，例如点击一个超链接、加载静态资源、提交表单以及直接发起 ajax 请求等。如：
如果用户之前在 acom 认证过，即浏览器保持有效的 cookie ，这些请求也会携带相应的 cookie ，而用户可能并不知情。
Same-Site Cookies 出现以前我们并没有一种简单而有效的方式去阻止 CSRF 攻击，其中一种方式是通过检查 origin 和 referer 来校验，缺点是依赖浏览器发送正确的字段，而这并不总是准确有效的；另一种方式则是通过给表单添加随机 token 的方式来校验，但是部署比较麻烦。
Same-Site Cookies 的出现就是为了解决这个问题，它可以完全有效的阻止 CSRF 攻击。Same-Site Cookies 非常容易部署，只需要将你原来的设置 cookie 的地方，如下：
改为：
准确的说 SameSite 这个属性有两个可选值，分别是 Strict 和 Lax 。其中 Strict 为严格模式，另一个域发起的任何请求都不会携带该类型的 cookie，能够完美的阻止 CSRF 攻击，但是也可能带来了少许不便之处，例如通过一个导航网站的超链接打开另一个域的网页会因为没有携带 cookie 而导致没有登录等问题。因此 Lax 相对于 Strict 模式来说，放宽了一些。简单来说就是，用 「安全」的 >1、html文件是最常见的网页文件，所谓HTML是超文本标记语言（HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
2、html文件的编辑非常简单，使用文本编辑器就可以打开，也可以使用editplus，vim，notepad++，ultraEdit 等等编辑工具打开，打开就可以直接看到源码，也可以进行编辑修改。
3、如果是想看HTML页面呈现的效果，可以使用浏览器打开。不同的浏览器可能显示效果会有不一致。
4、表单的话，可以直接使用table来实现，就是俗称的表格标签。
5、希望对你有帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）