html-表单-1.1

最新推荐文章于 2023-01-31 12:12:55 发布

彩舒

最新推荐文章于 2023-01-31 12:12:55 发布

阅读量506

点赞数

分类专栏：前端技术文章标签： html5 表单 API

本文链接：https://blog.csdn.net/caishu1995/article/details/80271719

版权

前端技术专栏收录该内容

105 篇文章 1 订阅

订阅专栏

今天在看html5的时候，看到了表单API,试验了一下，觉得很智能啊，有木有( • ̀ω•́ )✧。哎，之所以已经很久没有使用表单的方式提交内容，就是因为他提交表单后会刷新页面。但如果忽略这个问题，那么他真的很好用耶(･ω<)☆

-----------------------------------------------------------------
-----------------------------------------------------------------

1、required属性

2、setCustomValidity()

3、无效验证

4、实时验证
-----------------------------------------------------------------
-----------------------------------------------------------------

1、required属性

在开始之前，咱们先来看看表单自动验证的一个属性。

<input type="text" required="required">

required属性的值只有一种，就是他自己。你把这个属性加上了，在加一个submit类型的输入框。点击submit，然后就会自动进行验证了

（提示框出来的时候，有动画的，有动画的，有动画的！）

很好用吧，但咱们不能就用这个自带的吧，咱们也要定制属于咱们的东东呀，那我们就用这些API来实现吧，加油咯

2、setCustomValidity()

//输入框对象.setCustomValidity
input.setCustomValidity("name1 hasn't write");

这样就可以给输入框绑定特定的验证信息。如果验证信息为空，则可以正常提交。

代码呢？代码呢？来了！来了！

<!DOCTYPE html>
<html lang="en">
<head><title>setCustomValidity</title></head>
<body>
    <form>
        <input type="text" id="firstName">
        <input type="submit" id="send" value="sign up">
    </form>

    <script>
        alert(1);
        window.addEventListener("load", function() {
            document.getElementById("firstName").setCustomValidity("need to write");
        }, false);
    </script>
</body>
</html>

如果setsetCustomValidity的参数改为""，则不会出现提示框，而是直接弹出1，为什么呢？因为成功提交后页面刷新啦，然后alert(1)就执行啦。

3、无效验证

每当用户提交表单是，如果检查到无效域，就会触发invalid事件。那我们可以手工添加这个事件给form表单，然后我们可以自定义按钮，点击按钮时检查form表单是否有无效域。那我们就不用submit输入框啦。啦啦啦啦德玛西亚！

先上invalid绑定方法。

document.information.addEventListener("invalid", validation, true);

大家先来注意一个很重要很重要的问题哦！！document.information这是什么东东呢？我一查document没有information啊。那他是什么啊？！后来发现了这个代码

<form name="information">

￣へ￣原来他是个form的名称啊，要想给这个form绑定内容，是可以直接用document.表单名的方式使用。。。

然后上检查有无无效域的代码。

document.information.checkValidity();

执行这个方法的时候，如果发现无效域就会自动触发invalid事件了。如果返回值是true就表示没有无效域。

代码呢？代码呢？来了！别催咯！俺知道滴！

<!DOCTYPE html>
<html lang="en">
<head><title>无效验证</title></head>
<body>
    <form name="information">
        <input type="text" id="age" name="age" required>
        <button id="send" onclick="clickFunction()">sign up</button>
    </form>

    <script>
        function validation(e) { e.target.style.background = "red"; }
        window.addEventListener("load", function() { document.information.addEventListener("invalid", validation, true); }, false);
        
        function clickFunction() {
            if(document.information.checkValidity())
                document.information.submit();
        }
    </script>
</body>
</html>

4、实时验证

上面的那些验证，只能在提交的时候才能看到结果，但是我们有时候就想要马上看到有没有正确填写，肿么办？！还有一招，哈哈，那就是绑定oninput事件。然后调用的时候检查。那怎么检查呢

e.target.validity.valid

这个是用来验证元素是否符合条件。哈哈，那我们就可以写出如下的东东了。这回不用你催\٩('ω')و/酱酱酱 (✌ﾟ∀ﾟ)

<!DOCTYPE html>
<html lang="en">
<head><title>实时验证</title></head>
<body>
    <form name="information">
        <input type="text" id="age" name="age" required>
    </form>

    <script>
        function checkFunction(e) {
            e.target.style.background = (!e.target.validity.valid) ?  "red": "yellow";
        }

        window.addEventListener("load", function() {
            document.information.addEventListener("input", checkFunction, true);
        });
    </script>
</body>
</html>

最后，让我们看一个对象。validityState。
customError——-如果设置了自定义的错误提示信息，则返回truepatternMismatch-如果输入的值与pattern特性的正则不匹配，则返回true
rangeOverflow—-如果输入的值大于max值，则返回true

rangeUnderflow—如果输入的值小于min值，则返回true

stepMismatch——如果输入的值不符合step所推算出的规则，则返回true
tooLong————-如果输入的值超过了maxLength值，则返回true

typeMismatch——如果输入的值与type类型不匹配，则返回true

valueMissing——如果必填的值为空，则返回true

参考： HTML5精粹

彩舒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html-表单-1.1

今天在看html5的时候，看到了表单API,试验了一下，觉得很智能啊，有木有( • ̀ω•́ )✧。哎，之所以已经很久没有使用表单的方式提交内容，就是因为他提交表单后会刷新页面。但如果忽略这个问题，那么他真的很好用耶(･ω&lt;)☆ --------------------------------------------------------------------------...
复制链接

扫一扫