zoukankan      html  css  js  c++  java
  • JS 表单的验证

    表单用于搜集不同类型的用户输入。

    表单的基本元素有:

    Button

    Checkbox

    Text

    Radio

    Select

    Option

    Submint

    Reset

    Textarea

    具体怎么使用我就不介绍了,可以查看HTML。

    表单的基本属性有

    action  表单要发送出去的地址

    enctype:表示表单的封装方式

    target:表示发送后的跳转方式

    method:提交的方式,一般有get跟post

    如果采用 POST 方法,浏览器将会按照下面两步来发送数据。首先,浏览器将与 action 属性中指定的表单处理服务器建立联系,一旦建立连接之后,浏览器就会按分段传输的方法将数据发送给服务器。

    在服务器端,一旦 POST 样式的应用程序开始执行时,就应该从一个标志位置读取参数,而一旦读到参数,在应用程序能够使用这些表单值以前,必须对这些参数进行解码。用户特定的服务器会明确指定应用程序应该如何接受这些参数。

    另一种情况是采用 GET 方法,这时浏览器会与表单处理服务器建立连接,然后直接在一个传输步骤中发送所有的表单数据:浏览器会将数据直接附在表单的 action URL 之后。这两者之间用问号进行分隔。

    get方式:通过url传输,不安全,传输的内容大小有限制,不可以存放敏感信息。

    post方式:它是传输整个页面,传输比较安全,没有大小的限制

    关于表单的验证:

    表单在提交的时候主要用于两个方法,submit()提交表单与Reset()重置表单。

    一般在提交的时候,我们需要对提交的内容进行判断,这个就需要运用onsubmit()与onreset()。

    onsubmit()是在表单提交之前调用的,如果返回false,就取消提交表单,这个事件只有在点击提交按钮的时候才会触发,调用submit()事件不会触发。

    看看它的实际操作吧

     1 <!DOCTYPE html>
     2 <html>
     3 <head>
     4     <title></title>
     5 <script type="text/javascript">
     6 
     7 
     8     function checkform(thisform) {
     9         with (thisform) {
    10             if (name.value == null || name.value == "") {
    11                 name.focus(); alert("不可为空"); return false
    12             }
    13             if (password.value == null || password.value== "") {
    14                 password.focus(); alert("密码不可为空"); return false;
    15             }
    16             if (password.value.length < 8) {
    17             password.focus(); alert("密码长度不可小于8");return false;
    18             }
    19         }
    20     }
    21 </script>
    22 </head>
    23 
    24 <body>
    25 <form action="submitpage.htm" onsubmit="return checkform(this)" method="post">   //onsubmit()进行检测
    26 name: <input type="text" name="name" size="30">
    27     password:<input type="password" size="30" name="password" />
    28 <input type="submit" value="Submit"> 
    29 </form>
    30 </body>
    31 
    32 </html>

    这里介绍大体的使用操作,便于了解

     

  • 相关阅读:
    DNS正向解析实现
    基于bind软件部署DNS服务器
    DNS解析工具使用案例
    DNS服务工作原理
    3
    .deb/.whl/.tgz/.tar/gz软件包安装方式(Ubuntu)
    博客系列目录
    Databricks 第3篇:pyspark.sql 通过JDBC连接数据库
    Databricks 第2篇:pyspark.sql 简介
    数据预处理 第4篇:数据预处理(sklearn 插补缺失值)
  • 原文地址:https://www.cnblogs.com/joe2014/p/3825156.html
Copyright © 2011-2022 走看看