我需要针对此正则表达式测试输入字段（<input type="text" />）：
[^'"]+
这显然不是一件容易的事，因为我无法在属性中使用"。使用“实体”似乎不起作用，因为它通过正则表达式引擎按字面解释。
我该如何做到这一点？
答案 0 :(得分：29)
HTML5 @pattern属性regex基于JavaScript正则表达式，因此您可以像在JavaScript中一样使用十六进制表示法或 unicode表示法：
" = \x22 OR \u0022
' = \x27 OR \u0027
这样您就可以轻松使用
pattern="[^'\x22]+"
TADA！没有涉及JavaScript库！ ;）
答案 1 :(得分：0)
您可以使用十六进制表示法代替<template>
<div class="modal fade danger-modal" id="errorModal" tabindex="-1" role="dialog" aria-labelledby="errorModalTitle" aria-hidden="true"
data-keyboard="false" data-backdrop="static" style="z-index: 99999">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content danger-modal-content">
<div class="modal-header danger-modal-headerfooter">An error has occurred</div>
<div class="modal-body">
<p v-if="failedProcess === 'appGetAccount' || failedProcess === 'existOrderSearchProdOrders' || failedProcess === 'stockSearchStockLevels'
|| failedProcess === 'cartFetchCouriers'">
{{ contactTxt | capitalize }}
</p>
<p v-else-if="errorCount < 3">If the error continues, {{ contactTxt }}</p>
<p v-else>As the error has continued, {{ contactTxt }}</p>
<p>
<b>
01234 567890
<br />
Open from 00:00 to 07:00
</b>
</p>
<p>Advising of what you were doing when the error occurred.</p>
</div>
<div class="modal-footer danger-modal-headerfooter">
<a v-if="failedProcess === 'appGetAccount'" ref="logoutButton" class="btn btn-primary" :class="logoutButtClicked" @click="logoutClicked = true" href="/site/logout">
<span v-if="!logoutClicked" id="logoutButtonLabel">Logout</span>
<span v-else id="logoutSpinner">
<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
Logging out
</span>
</a>
<router-link v-else-if="failedProcess === 'fetchOrderReportDetails'" to="/review" tag="button"
ref="existOrdersButton" class="btn btn-primary" type="button" data-dismiss="modal" @click.native="closeButton">
Return to existing orders
</router-link>
<button v-else-if="errorCount < 3 && (failedProcess !== 'productsFetchProducts' && failedProcess !== 'existOrderSearchProdOrders'
&& failedProcess !== 'stockSearchStockLevels' && failedProcess !== 'cartFetchCouriers')" ref="closeButton" class="btn btn-primary"
type="button" data-dismiss="modal" @click="closeButton">
Close
</button>
<router-link v-else to="/" tag="button" ref="homeButton" class="btn btn-primary" type="button" data-dismiss="modal" @click="closeButton">
Return to homepage
</router-link>
</div>
</div>
</div>
</div>
</template>
<script>
import * as params from '../params';
export default {
name: "ErrorModal",
data() {
return {
contactTxt: 'please contact us on:',
errorCount: 0,
failedProcess: '',
}
},
mounted() {
VueEvent.$on('show-error-modal', (failedProcess) => {
if (this.failedProcess !== failedProcess) {
this.errorCount = 0;
}
this.failedProcess = failedProcess;
$('#errorModal').modal('show').on('shown.bs.modal', this.focus);
});
},
methods: {
focus() {
if (this.failedProcess === 'appGetAccount') {
this.$refs.logoutButton.focus();
} else if (this.failedProcess === 'fetchOrderReportDetails') {
this.$refs.existOrdersButton.$el.focus();
} else if (this.errorCount < 3 && this.failedProcess !== 'productsFetchProducts') {
this.$refs.closeButton.focus();
} else {
this.$refs.homeButton.$el.focus();
}
},
}
}
</script>`enter code here`
或'。
"
pattern="[^'\x22]+"
答案 2 :(得分：-1)
尝试使用js框架，例如JQuery或PrototypeJS
然后你可以说
onchange=(function() {...});
你可以通过这个帖子关注如何在jQuery上使用正则表达式：Regular expression field validation in jQuery
答案 3 :(得分：-1)
如果您有HTML5浏览器，则可以编写
<input id="ipt_my_field" type="text" name="my_field_name" pattern="[^'"]+"
并且你需要准备一些不具备Modernizer功能的浏览器，并且需要这样的
if(!Modernizr.input.pattern) {
var input = document.getElementById("ipt_my_field");
input.addEvent('onblur', function(ip){
if(ip.value.match(/[^'"]+/)) {
// is a good
} else {
// is a bad
}
});
}