@ -1522,7 +1536,7 @@ ESP8266WebServer class will parse the query string and rebuilds its arguments wh
<iclass="fa fa-arrow-down"></i><br>
<iclass="fa fa-eye"></i> It's shown as like:<spanstyle="margin-left:14px;width:272px;height:118px;border:1px solid lightgray;"><imgalign="top"width="270"height="116"src="images/acow.png"></span></p>
<h3id="check-data-against-on-submission"><iclass="far fa-check-square"></i> Check data against on submission<aclass="headerlink"href="#check-data-against-on-submission"title="Permanent link">¶</a></h3>
<p>By giving a <ahref="apielements.html#pattern">pattern</a> to <ahref="apielements.html#autoconenctinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup> If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.</p>
<p>By giving a <ahref="apielements.html#pattern">pattern</a> to <ahref="apielements.html#autoconnectinput">AutoConnectInput</a>, you can find errors in data styles while typing in custom Web pages. The pattern is specified by <ahref="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions">regular expression</a>.<supid="fnref:2"><aclass="footnote-ref"href="#fn:2"rel="footnote">2</a></sup> If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.</p>
<p>If you are not familiar with regular expressions, you may feel that description very strange. And matter of fact, it is a strange description for those unfamiliar with formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The <ahref="https://regex101.com/">regex101</a> is an exceptional online site for testing and debugging regular expressions.</p>
<p>The <ahref="apielements.html#pattern">pattern</a> attribute of <ahref="apielements.html#autoconnectinput">AutoConnectInput</a> only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it.</p>
<p>You can validate input data from <ahref="apielements.html#autoconnectinput">AutoConnectInput</a> using the <ahref="apielements.html#isvalid">isValid</a> function before actually processing it. The <ahref="apielements.html#isvalid">isValid</a> function determines whether the <ahref="apielements.html#value_3">value</a> currently stored in <ahref="apielements.html#autoconnectinput">AutoConnectInput</a> matches the <ahref="apielements.html#pattern">pattern</a>. </p>
<h3id="convert-data-to-actually-type"><iclass="fa fa-exchange"></i> Convert data to actually type<aclass="headerlink"href="#convert-data-to-actually-type"title="Permanent link">¶</a></h3>
<p>The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section <ahref="datatips.html#convert-autoconnectelements-value-to-actual-data-type"><em>Tips for data conversion</em></a>.</p>
<h2id="transitions-of-the-custom-web-pages">Transitions of the custom Web pages<aclass="headerlink"href="#transitions-of-the-custom-web-pages"title="Permanent link">¶</a></h2>
### <iclass="far fa-check-square"></i> Check data against on submission
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconenctinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^2] If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.
By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.md#autoconnectinput), you can find errors in data styles while typing in custom Web pages. The pattern is specified by [regular expression](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).[^2] If the value during input of AutoConnectInput does not match the regular expression specified in the pattern, its background color changes to pink. The following example shows the behavior when checking the IP address in the AutoConnectInput field.
[^2]:Regular expression specification as a pattern of AutoConnectInput is [JavaScript compliant](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions).
@ -564,6 +564,14 @@ By giving a [pattern](apielements.md#pattern) to [AutoConnectInput](apielements.
If you are not familiar with regular expressions, you may feel that description very strange. And matter of fact, it is a strange description for those unfamiliar with formal languages. If your regular expression can not interpret the intended syntax and semantics, you can use an online tester. The [regex101](https://regex101.com/) is an exceptional online site for testing and debugging regular expressions.
### <imgsrc="images/regexp.png"align="top"> Validate input data
The [pattern](apielements.md#pattern) attribute of [AutoConnectInput](apielements.md#autoconnectinput) only determines the data consistency on the web browser based on the given regular expression. In order to guarantee the validity of input data, it is necessary to verify it before actually using it.
You can validate input data from [AutoConnectInput](apielements.md#autoconnectinput) using the [isValid](apielements.md#isvalid) function before actually processing it. The [isValid](apielements.md#isvalid) function determines whether the [value](apielements.md#value_3) currently stored in [AutoConnectInput](apielements.md#autoconnectinput) matches the [pattern](apielements.md#pattern).
### <iclass="fa fa-exchange"></i> Convert data to actually type
The values in the AutoConnectElements field of the custom Web page are all typed as String. A sketch needs to be converted to an actual data type if the data type required for sketch processing is not a String type. For the typical data type conversion method, refer to section [*Tips for data conversion*](datatips.md#convert-autoconnectelements-value-to-actual-data-type).
Hieromon Ikasamo
5 years ago