javascript基础 之 表单
1，js可以验证表单
实例1，js获取表单的内容
//html表单是这样的 <form name="myForm" action="demo_form.php" onsubmit="return validateForm()" method="post"> 名字: <input type="text" name="fname"> <input type="submit" value="提交"> </form> //js验证表单的程序 function validateForm() { var x = document.forms["myForm"]["fname"].value; if (x == null || x == "") { alert("需要输入名字。"); return false; } } //注意这个表单返回的是布尔值，而html表单里的onsubmit是“return false”或者“return true”
//其实道理很简单，但是格式需要记住：表单信息获取是document.forms['表单名']['表单下的元素名'].value 其实有点像python里的raw_input
实例2：验证文本框里是否输入了1-10之间的数字（和表单还是有些不同）
<body> <h1>JavaScript 验证输入</h1> <p>请输入 1 到 10 之间的数字：</p> <input id="numb"> <button type="button" onclick="myFunction()">提交</button> <p id="demo"></p> <script> function myFunction() { var x, text; // 获取 id="numb" 的值 x = document.getElementById("numb").value; // 如果输入的值 x 不是数字或者小于 1 或者大于 10，则提示错误 Not a Number or less than one or greater than 10 if (isNaN(x) || x < 1 || x > 10) { text = "输入错误"; } else { text = "输入正确"; } document.getElementById("demo").innerHTML = text; } </script>
实例3，表单自动验证，内容是属于js的范围，但是书写形式不是直接敲代码，而是把HTML和js融合了
<html> <head> <meta charset="utf-8"> </head> <body> <form action="demo_form.php" method="post"> //老子是表单，提交的时候会把信息传给action指定的文件，方法按照post来 <input type="text" name="fname" required="required"> //意思：我是一个文本框，名字是fname（用于接收端定位信息），以定要有信息才能被提交。 <input type="submit" value="提交"> </form> <p>点击提交按钮，如果输入框是空的，浏览器会提示错误信息。</p> </body> </html>
2，约束验证（dom属性）
1，必填项目验证
</head> <head> <script> function validateForm(){ var x=document.forms["myForm"]["fname"].value; if (x==null || x==""){ alert("姓必须填写"); return false; } } </script> </head> <body> <form name="myForm" action="demo-form.php" onsubmit="return validateForm()" method="post"> 姓: <input type="text" name="fname"> <input type="submit" value="提交"> </form> </body> //运行流程：点击提交->执行函数验证->文本框为空的话函数会提示并且返回false->onsubmit会return false，阻止提交
2，数据格式验证，比如电子邮箱验证
思想上和上面的差不多，函数内部可以用js的正则表达式匹配：教程：https://www.jb51.net/article/126866.htm
3,dom验证方法，如下
<body> <p>输入数字并点击验证按钮:</p> <input id="id1" type="number" min="100" max="300" required> <button onclick="myFunction()">验证</button> <p>如果输入的数字小于 100 或大于300，会提示错误信息。</p> <p id="demo"></p> <script> function myFunction() { var inpObj = document.getElementById("id1"); if (inpObj.checkValidity() == false) { //查看一下inpObj的属性是否合法 document.getElementById("demo").innerHTML = inpObj.validationMessage; //浏览器提示的错误信息 } else { document.getElementById("demo").innerHTML = "输入正确"; } } </script> </body>
checkValidity()：如果 input 元素中的数据是合法的返回 true，否则返回 false。
setCustomValidity()：设置 input 元素的 validationMessage 属性，用于自定义错误提示信息的方法。
